JQuery와 : 내가 혼란과 함께 물건을 넣을 수없는 무엇입니까

Question

현재 앵커 태그의 하이라이트 navig ... 내가 다른 섹션과 단일 페이지 웹 사이트를 만들어

• 는
내가 함께 끈적 끈적한 탐색했다 jquery.sticky.js,
• http://jsfiddle.net/joshnh/YxRqp/의 도움으로 현재 탭이 강조 표시되었습니다. 웨이 포인트가하는 jQuery 플러그인 (http://imakewebthings.com/jquery-waypoints/)이 나 있지만, 도움을 줄 수

하지만 난 다른 하나 개의 섹션에서 갈 때 탐색 탭 scolling와 하이라이트를 변경하지 마십시오 ...

내가 인터넷에 빨간색 작동하지 않습니다 ... 누군가가 js, css 및 html 코드를 추가해야한다고 말해 줄 수 있습니까 (Waypoint 또는 Without)?

합니다 (index.html을의 신체 부위에서) 하이라이트를위한 HTML

<nav id="mainnav"> 
    <div class="container"> 
     <ul class="links"> 
     <li><a id="homenav" class="scroll" href="#homepage">About</a></li> 
     <li><a id="sensnav" class="scroll" href="#parallax1">Sensuality</a></li> 
     <li><a id="scennav" class="scroll" href="#parallax2">Scenes</a></li> 
     <li><a id="montnav" class="scroll" href="#parallax3">Montage</a></li> 
     <li><a id="celenav" class="scroll" href="#parallax4">Celebrities</a></li> 
     <li><a id="modenav" class="scroll" href="#parallax5">Mode</a></li> 
     <li><a id="portnav" class="scroll" href="#parallax6">Other Portraits</a></li> 
     <li><a id="objenav" class="scroll" href="#parallax7">Objects</a></li> 
     <li><a id="miscnav" class="scroll" href="#parallax8">Miscellaneous</a></li> 
     <li><a id="contnav" class="scroll" href="#contact">Contact</a></li> 
     <li><a id="morenav" class="scroll" href="#more">Links & More</a></li> 
     </ul> 
    </div> 
</nav> 

<section id="parallax1"> 
    <h1>Sensuality</h1> 
</section> 

JS를

<script> 
var main = main = $('#mainnav div ul'); 

$('.scroll').click(function(event) { 

    event.preventDefault(); 

    var full_url = this.href, 
     parts = full_url.split('#'), 
     trgt = parts[1], 
     target_offset = $('#'+trgt).offset(), 
     target_top = target_offset.top; 

    $('html, body').animate({scrollTop:target_top}, 500); 

    /* Remove active class on any li when an anchor is clicked */ 

    $('#mainnav div ul').children().removeClass(); 

    /* Add active class to clicked anchor's parent li */ 

    $(this).parent().addClass('active'); 

}); 
</script> 

CSS

nav { 
width: 100%; 
height: 50px; 
position: relative; 
z-index: 1000; 
background: rgba(26,30,39,0.7); 
opacity: 0; 
filter: alpha(opacity=0); 
} 

nav .container { 
width: 96%; 
} 

.links { 
height: 50px; 
display: table-cell; 
vertical-align: middle; 
} 

.links li { 
height: 50px; 
display: inline; 
margin: 0 15px 0 0; 
padding: 2px; 
} 

.links a { 
font-family: 'Yanone Kaffeesatz', sans-serif; 
font-size: 20px; 
color: #ffffff; 
text-decoration: none; 
text-transform: uppercase; 
} 

.links a:visited { 
color: #ffffff; 
} 

.links a:hover { 
color: #b0b825; 
} 

.links a.current { 
color: ffd200; 
} 

nav#mainnav li.active a { 
color: #ffd200; 
} 

당신은 여기 살고 볼 수 있습니다 http://photography.igorlaszlo.com를

정확히 내가해야 할 일은, 내가 자바 스크립트에서 전문 아니에요 ...

미리 감사드립니다!

Answer 1

내가 코드

$(document).ready(function(){ 
$("#top1").parent().addClass('active'); 
var main = main = $('#main ul'); 

$('.scroll').click(function(event) { 

    event.preventDefault(); 

    var full_url = this.href, 
     parts = full_url.split('#'), 
     trgt = parts[1], 
     target_offset = $('#'+trgt).offset(), 
     target_top = target_offset.top; 

    $('html, body').animate({scrollTop:target_top}, 500); 

    /* Remove active class on any li when an anchor is clicked */ 

    main.children().removeClass(); 

    /* Add active class to clicked anchor's parent li */ 

    $(this).parent().addClass('active'); 

}); 

    $(window).scroll(function(event) { 
    if($("#top").offset().top < $(window).scrollTop() + $(window).outerHeight()) { 
$("#top1").parent().addClass('active'); 
$("#middle1").parent().removeClass('active'); 
$("#bottom1").parent().removeClass('active');   
} 
if($("#middle").offset().top < $(window).scrollTop() + $(window).outerHeight()){ 
$("#middle1").parent().addClass('active'); 
$("#top1").parent().removeClass('active'); 
$("#bottom1").parent().removeClass('active'); 
} 
if($("#bottom").offset().top < $(window).scrollTop() + $(window).outerHeight()){ 
$("#bottom1").parent().addClass('active'); 
    $("#top1").parent().removeClass('active'); 
$("#middle1").parent().removeClass('active'); 
}  
}); 
}); 

에 당신의 HTML을 일부 변경 한이 시도 id 속성 여기

 <li><a href="#top" class="scroll" id="top1"></a></li> 
     <li><a href="#middle" class="scroll" id="middle1"></a></li> 
     <li><a href="#bottom" class="scroll" id="bottom1"></a></li> 

을 추가하여 다음과 같은 태그에 약간의 변화를 만든 jsfiddle 을하고있다 Demo

희망이 있으면 도움이됩니다.

Answer 2

나는 나 자신에 대한 답을 줄지도 모른다. 어쩌면 누군가는 그것을 사용할 것이다. 마침내 나는 다음을 포함하는 해결책을 찾았다. 1) 네비게이션에 하이라이트 액티브 버튼과 3) 하이라이트는 마우스 휠 스크롤에서도 작동합니다!

여기 자습서를 찾을 수 있습니다 내 웹 페이지에 http://trevordavis.net/blog/jquery-one-page-navigation-plugin 및 데모를 여기에 : http://photography.igorlaszlo.com