用javascript移动菜单栏

Question

我正在设计一个带有菜单栏的网站，该菜单栏以标题元素中的相对位置开头。它与顶部的距离（以像素为单位）为300.我想制作一个javascript函数，当我在300像素以下的页面上滚动时，将位置更改为固定，将顶部更改为0。这样，当向下导航时，菜单栏将始终位于屏幕顶部。有没有人有这样做的好方法？我想过可能会做一些类型的函数，它在设置定时器之后检查10 ms并检查window.pageYoffset。这不是最好的方法。任何建议都表示赞赏。

Answer 1

Monitor the window's scroll event:

$(window).on('scroll', function(e) {
    if ($('body').scrollTop()>300) {
        $('#header').css('position','fixed');
    } else {
        $('#header').css('position','relative');
    }
});

略微优化：

$(window).on('scroll', function(e) {
    $('#header').css('position', ($('body').scrollTop()>300) ? 'fixed' : 'relative');
    }
});