-3

我想做一些与这个网站非常相似的事情：http: //feed-the-beast.com/

当您单击导航链接时，页面将向下滑动到适当的 id，并且“活动”导航按钮以某种方式突出显示。我怎样才能做到这一点？我还想为不止一页这样做，因为我还将为论坛设置一个单独的页面。

编辑：我怎样才能完成向下滑动页面？

4

2 回答 2

2

在此处查看演示：http: //jsfiddle.net/4sGmG/1/

HTML：

<nav>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    <a href="#four">Four</a>
    <a href="#five">Five</a>
</nav>

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>

jQuery：

$('nav a').on('click', function() {
    var activeDiv = $(this).attr('href');

    //setActiveMenuItem($(this));

    $('html, body').animate({
       scrollTop: $(activeDiv).offset().top
    }, 2000);        
});

$(window).on('scroll', function(e) {
    var bodyTop = $(document).scrollTop();

    $('div').each(function() {
        var offset = $(this).offset().top - $(window).scrollTop();

        if (offset >= 0) {
            setActiveMenuItem($(this).attr('id'));

            return false;
        }
    });
});

function setActiveMenuItem(id) {
    $('a[href=#' + id + ']').addClass('active');
    $('a[href=#' + id + ']').siblings().removeClass('active');
}
于 2013-03-28T19:06:36.097 回答
0

使用 JavaScript (jQuery) 软化的基本锚导航可以解决问题。熟悉 Firebug 或 Chrome 的开发人员工具，了解该站点是如何完成的。

Twitter Bootstrap 提供了 ScrollSpy，这是一种位置检测机制，可能也很有用。http://twitter.github.com/bootstrap/javascript.html#scrollspy

于 2013-03-28T19:07:13.560 回答