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

Question

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

选择该页面后，我无法弄清楚如何在上侧导航栏的锚元素下划线。 我只希望它警告用户它们位于哪个页面上，即使用户使用滚动条导航到该部分，我也需要更改它。

页面的每个部分都有一个从导航链接的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'});
    }
})