javascript - 选择页面后更改锚标记的 CSS - 单页网站

Question

我有一个单页网站，分为 5 个页面（部分），每个部分填满屏幕，当用户单击导航时，它会平滑地向下滚动到该部分。

选择该页面后，我无法弄清楚如何在上部导航中为锚元素加下划线。我只是希望它提醒用户他们在哪个页面上，即使用户使用滚动条导航到该部分，我也需要它进行更改。

页面的每个部分都有一个从导航链接的 id。如果每个部分都是它自己的页面，但当它是一个单页站点时，我知道如何做到这一点。

请问有jQuery插件或纯CSS方式吗？

Answer 1

jQuery 将是你最好的选择。当用户滚动页面时，这将自动更改导航元素。如果每个部分具有相同的高度，则此方法效果最佳，但可以稍作更改以使用多个部分高度。可能需要稍作改动才能完全适合您的网站。

//activates every time user scrolls
$(window).scroll(function () {

    //gets the current scroll height
    scroll = $(document).scrollTop()

    //gets section height -- this is where the editing will have to be done if
    //each section is a different height
    H = $('.section_class_name').height()

    //get the number of sections down
    place = (scroll) / H;
    place = Math.floor(place) - 1;

    if($(document).scrollTop() >= H) {
        //all other nav items have no background
        $('#menu_ul li').css('background', '');

        //the corresponding nav element has this background
        $('#menu_ul li').eq(place).css({'background':'#505080','border-radius':'9px'});
    }
})