HTML

Question

我感到困惑，无法将事情放在一起......

我创建了一个包含不同部分的单页网站
我用jquery.sticky.js做了一个粘性导航，
我在此帮助下突出显示了当前标签：http://jsfiddle.net/joshnh/YxRqp/。

但是，当我从一个部分转到另一个部分时，导航标签不会通过晃动来更改突出显示...

我在互联网上说，Waypoints，一个jquery插件（http://imakewebthings.com/jquery-waypoints/）可以帮助我，但它不起作用...有人能告诉我我必须添加的js，css和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的亮点（在index.html的正文部分）

<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

请准确说明我必须做的事情，我不是javascript的专业人士......

提前致谢！

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）SMOOTH SCROLL锚定标签（一页网站），2）导航时亮点活动按钮和3）突出显示也适用鼠标滚轮滚动！

您可以在此处找到该教程：http://trevordavis.net/blog/jquery-one-page-navigation-plugin以及我的网页上的演示：http://photography.igorlaszlo.com

Jquery：突出显示当前锚标记的导航

HTML

JS的亮点（在index.html的正文部分）

CSS

2 个答案: