0

我越来越困惑，无法把事情放在一起......

  • 我创建了一个包含不同部分的单页网站，
  • 我用 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专业人士......

提前致谢 ！

4

2 回答 2

1

我给自己一个答案，也许有人也会使用它......最后我找到了一个解决方案，其中包括：1）平滑滚动到锚标签（一个页面网站），2）导航上的突出显示活动按钮和 3）突出显示适用于鼠标滚轮也滚动！

你可以在这里找到教程：http: //trevordavis.net/blog/jquery-one-page-navigation-plugin和我的网页上的演示：http: //photography.igorlaszlo.com

于 2013-08-24T10:17:42.520 回答
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演示

希望这有助于谢谢。

于 2013-08-14T13:31:05.447 回答