让JS在页面上检测位置?

时间:2013-11-07 15:20:03

标签: javascript html css

我有一个单页网站,之前它有3个不同的页面,导航栏到当前页面的链接变为'id =“selected”

#selected {
background-color:white;
color: #645406;
cursor: default;
}

当你在那个页面上时。 现在它有点难,因为链接就像锚链接一样。 我需要一个可以检测用户滚动位置的脚本,并在用户滚动锚点时自动将锚点的链接转换为'id =“selected”。

实施例: http://jsfiddle.net/mbSXB/

1 个答案:

答案 0 :(得分:1)

试试这个http://jsfiddle.net/8NKqf/1/

$(function() {
    var anchors = $('.anchor');
    var navLinks = $('.navigointi a');

    $(window).scroll(function() {
        var scrollTop    = $(window).scrollTop();
        var clientHeight = document.documentElement.clientHeight;
        var activeSectionAnchor, hash;

        anchors.each(function() {
            if ($(this).offset().top < scrollTop + clientHeight) {
                activeSectionAnchor = $(this);
            }
        });

        hash = "#" + activeSectionAnchor.attr('name');

        activeLink = navLinks.removeClass('selected').filter('[href="' + hash + '"]');

        activeLink.addClass('selected');
    });
});