Question

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

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

注意：如果可能的话，没有第三方软件包会在加载时减慢页面速度，就像许多js文件一样。

由于

Sticky header on scroll with jQuery and CSS
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

技巧包括检查当前滚动位置。此示例将根据滚动位置（低于200px）将内容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'});
  }
});

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

3 个答案: