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

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

1 个答案: