메뉴 on값 주기..
관련링크
본문
안녕하세요.
현재 사이트의 상단메뉴를 제작하고있는데, 계속해봐도 안되는 부분이 있어 질문드립니다.
참조사이트와 같이, 스크롤을 아래로 내리면 부여된 ID로 이동되게끔은 a href="#ID명" 과 같이 하면 된다고 알고 있습니다. 그런데 메뉴를 클릭한 뒤에 부여된 ID로 이동하게 되면, 메뉴의 색상이 변경되는 부분이 있는데, 해당 부분을 어떤식으로 구현을 해야할지 모르겠어서 너무 막막합니다..
fullpage.js를 사용해봐도 전혀 감을 못잡겠고.. 그누보드에서 제공하는 기본 jquery.menu.js 에서 hover 부분을 click로 변경하여 해봐도 안됩니다.
혹시 이러한 효과를 어떻게 구현하는지 알려주실 수 있을까요..?
답변드리는 모든 분께 항상 감사의 말씀을 전합니다.
감사합니다.
답변 2
해당 홈페이지는 스크롤시 부드럽게 이동합니다. 이러면 제이쿼를 활용 해야합니다.
아래 코드 참고하셔서 아이디랑 클래스값등 잘 응용해서 해보세요.
<style>
html, body {
margin: 0;
padding: 0;
}
.header {
background-color: #ccc;
padding: 5px;
}
.header li {
padding: 5px;
margin: 5px;
display: inline-block;
}
.header li a.on{
background-color: #ff2020;
}
.articles > div {
border: 1px solid;
margin: 10px;
padding: 250px 50px;
background-color: #ccc;
}
</style>
<div class="header">
<ul>
<li>상단 메뉴</li>
<li><a class="scroll" href="#text-1">#text-1</a></li>
<li><a class="scroll" href="#text-2">#text-2</a></li>
<li><a class="scroll" href="#text-3">#text-3</a></li>
<li><a class="scroll" href="#text-4">#text-4</a></li>
<li><a class="scroll" href="#text-5">#text-5</a></li>
<li><a class="scroll" href="#text-6">#text-6</a></li>
<li><a class="scroll" href="#text-7">#text-7</a></li>
<li><a class="scroll" href="#text-8">#text-8</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<div class="articles">
<div class="target" id="text-1">div1</div>
<div class="target" id="text-2">div2</div>
<div class="target" id="text-3">div3</div>
<div class="target" id="text-4">div4</div>
<div class="target" id="text-5">div5</div>
<div class="target" id="text-6">div6</div>
<div class="target" id="text-7">div7</div>
<div class="target" id="text-8">div8</div>
</div>
</div>
</div>
<script type="text/javascript">
// 스크롤시 부드럽게 이동하는 소스 시작
if ( window.location.hash ) scroll(0,0);
setTimeout( function() { scroll(0,0); }, 1);
/// 1000 이부분이 스크롤 속도, 메뉴의 scroll을 클릭시 스크롤 이벤트 발생
$(function() {
$('.scroll').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top + 'px'
}, 1000, 'swing');
});
if(window.location.hash) {
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top + 'px'
}, 1000, 'swing');
}
// 메뉴의 a를 클릭하면 해당 li a에 on을 추가
$('.header li a').on('click', function(event) {
$(this).parent().find('a').removeClass('on');
$(this).addClass('on');
});
// 상단 메뉴 고정 및 해당 앵커위치시 on 추가하기
var menu_offset = $('.header').offset();
// 윈도우를 스크롤 하면... 해당 div의 아이디를 찾아서 해당 메뉴 a에 on을 추가 하고 나머지는 삭제
$(window).scroll(function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).position().100) {
var id = $(this).attr('id');
$('.header li a').removeClass('on');
$('.header li a[href=#'+ id +']').addClass('on');
}
});
// 여기부터 상단에 메뉴 고정 하는 제이쿼리
if ($(document).scrollTop() > menu_offset.top) {
$('.header').css({
"position": "fixed",
"display": "block",
"z-index" : "10000",
"top":"0px"
});
}else {
$('.header').css({
"display": "block",
"position":"relative",
"z-index" : "10000"
});
}
});
});
</script>
코드 다시봤는데
if($(window).scrollTop() >= $(this).position().100) {
이부분을 잘못 알려드렸네요
if($(window).scrollTop() >= $(this).position().top) {
으로 수정해주세요!
답변을 작성하시기 전에 로그인 해주세요.
