用javascript移动菜单栏

Question

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

Answer 1

监视窗口的scroll事件：

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