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

Question

我想制作一个标题，它会在滚动事件中发生变化，就像在这个站点中一样。当光标位于页眉顶部时，会以不同的方式显示。向下滚动时，标题内容将更改并固定。

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

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

谢谢

1. 使用 jQuery 和 CSS 滚动时的粘性标题
2. 持久标头

例如：

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
        }
    });
});

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

希望能帮助到你！

Answer 2

像这样的东西：

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top add fixed position css to element
            $("#header").css('position','fixed');
            $("#menu1").css('display', 'none');
            $("#menu2").css('display', 'block');

        } else {
        // otherwise reset the css.
            $("#menu2").css('display', 'none');
            $("#menu1").css('display', 'block');

        }
    });
});

Answer 3

我不知道我的问题是否正确。但这将显示一个固定的菜单，如果您向下滚动，它将变得粘滞

var menu = $('#menu');
var menuOffset = menu.position().top; //original position of the menu

$(window).scroll(function() {
 if ($(window).scrollTop() > menuOffset + 40) {
                                menu.addClass("menu-fixed");
                                menu.css({position: 'fixed'});
                                menu.css({ top:0 });
                    } else {
                                menu.removeClass("menu-fixed");
                                menu.css({ top: menuOffset });
                                menu.css({position: 'static'});
  }
});