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

【问题标题】：Sticky fixed header with different contents具有不同内容的粘性固定标题
【发布时间】：2013-06-11 10:05:46
【问题描述】：

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

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

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

谢谢

举例：

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>

【问题讨论】：

你的问题一点都不清楚。你想让标题固定+改变它的内容吗？你都尝试了些什么？在相应的滚动处理程序中添加代码应该相对容易。
你的理解是正确的。我尝试的所有东西都在高度缩小。如果我能找到改变标题全部内容的东西，那么我可以根据我的设计要求对其进行更新。我只需要一个基本的起点。
在第一个演示示例站点中，当您向下滚动时，它会在导航中添加一个“卡住”类，然后在解除卡住时将其移除。因此，您可以使用 Javascript/jQuery 来显示更多内容并相应地修改 CSS。
我使用了 2 个 js 文件，这可能会降低页面速度。

标签： jquery html css

【解决方案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
        }
    });
});

我无法测试此代码，因此它可能存在错误，但它的目标是为您提供线索。此外，在更改内容之前，您应该检查是否已经完成。

希望对你有帮助！

【讨论】：

正是我想要的。谢谢。

【解决方案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');

        }
    });
});

【讨论】：

我在 if 和 else 语句之间使用了您的代码来完成 Alfonso 的解决方案，因此您也值得称赞。谢谢

【解决方案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'});
  }
});

【讨论】：