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

Question

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

一旦该页面被选中，我无法弄清楚如何在上方导航栏中为 anchor 元素添加下划线。我只是想让它提醒用户他们在哪个页面上，即使用户使用滚动条导航到该部分，我也需要它进行更改。

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

请问有 jquery 插件或纯 CSS 方法吗？

Answer 1

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

//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'});
    }
})