用javascript移动菜单栏

Question

我正在设计一个带有菜单栏的网站，该菜单栏以标题元素中的相对位置开始。它与顶部的距离（以像素为单位）为 300。我想做一个 javascript 函数，当我在 300 像素以下的页面上滚动时，将位置更改为固定位置，顶部更改为 0。这样在向下导航时菜单栏将始终位于屏幕顶部。有没有人有这样做的好方法？我想可能会做某种类型的功能，在设置的计时器后检查 10 毫秒并检查 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');
    }
});