使用Javascript使当前的h1 / h2保持粘性

Question

我想通过使h1或h2元素在顶部一直保持粘滞状态（向下滚动时）直到下一个标题即将消失，来使长文本的网站更加方便看不见并变粘。

我相信我已经在某些网站上看到了这一点，但是我不知道如何称呼它，也找不到示例。

我正在使用Bootstrap和JQuery，因此与它们中的任何一个配合使用的解决方案都是完美的。

Answer 1

$(window).on("scroll",function(){
/*Check if window scroll Top reaches menu position */
    if ($(window).scrollTop() >= 100) {
        $('div.menu-class').addClass('fixed');
        }
    else {
       $('div.header').removeClass('fixed');

    }
});

或者您可以检查菜单元素的顶部位置是否等于窗口滚动顶部。

 var window_top_position = $(window).scrollTop();
 var menuElement = $('.menu-class');
 var Menu_top_position = $menuElement.offset().top;

然后检查条件并在条件满足时添加“固定”，否则删除“固定”类

别忘了添加固定的CSS。

.fixed{
position:fixed;
top:0;
}

接受此答案是否对您有帮助。