jquery - 具有不同内容的粘性固定标题

Question

我想制作一个标题，它会像 this site 中的滚动事件一样改变。 .当光标位于页面顶部时，页眉将显示不同。向下滚动时，标题内容会发生变化并固定。

我找到了这些示例(以及许多其他示例)，但它们只会缩小并固定，标题内容根本不会改变。

注意:如果可能的话，没有第 3 方包的东西会在加载时减慢页面速度，例如许多 js 文件。

谢谢

1. > Sticky header on scroll with jQuery and CSS
2. > Persistent Headers

例如:

window.onscroll=function ()
{
   //Based on given offset like 100px maximum
   if (scroll == down)
   {
     //Display header_2 as fixed header
   }
   else
   {
     //Display header_1 as fixed header
   }

}

<div class="container">
   <div id="header_1">BIG HEADER with no menu</header>
   <div id="header_2">SMALL HEADER with menu only</header>
</div>

Answer 1

技巧在于检查当前滚动位置。此示例将根据滚动位置(低于 200 像素)将内容 A 或 B 设置为标题。

$(document).ready(function(){
    $(window).bind("scroll",function(e){
        if($(document).scrollTop() > 200) //
        { 
           //Set content B to header
        } else {
           //Set content A to header
        }
    });
});

我无法测试这段代码，所以它可能有错误，但它的目的是给你一个线索。另外，在更改内容之前，您应该检查是否已经完成。

希望对您有所帮助!