javascript - 当到达当前卡住的 header 时，用第二个 header 替换粘性 header

转载作者：太空宇宙更新时间：2023-11-03 20:16:55

我一直在阅读粘性标题，这是我目前所发现的。第一个粘性 header 效果很好，但是当它遇到第一个 header 时，我如何向上滚动第一个 header 并使第二个 header 卡住？

http://jsfiddle.net/

<style>
  body {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
  }
  .fixed {
    position: fixed;
    top: 0;
  }
  .sticky {
    width: 100%;
    background: #F6D565;
    padding: 25px 0;
    text-transform: uppercase;
  }
</style>

<p style="margin-bottom:100px;">Scroll this page.</p>
<div class="sticky"><h3>Super amazing header</h3></div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>
<div class="sticky"><h3>Super amazing 123</h3></div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>
<script>
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                  sticky.classList.remove('fixed');
}

document.addEventListener('scroll', onScroll);
</script>

最佳答案

我相信以下内容将完全如您所愿...

当滚动过去时，#firstHeader 将绑定(bind)到顶部，然后当 #secondHeader 与 #firstHheader 的底部发生碰撞时他们将加入，#firstHeader 将被推出屏幕，直到 #secondHeader 到达屏幕顶部并绑定(bind)到那里...

希望这是有道理的，如果没有，如果您实际看到它可能会更容易:http://jsfiddle.net/yZKea/

此解决方案确实使用了 jquery。因此，您需要在 head 中的其余 JS 代码之前包含对它的引用:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

注意 JS 并不像看起来那样令人生畏 或长，大部分内容是样式的重复设置。您可以轻松地将其更改为几行:)

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
.spacer{
    height:200px;
    background:#f00;
    opacity:.5;
    border-top:#d22 5px solid;
    width: 100%;
}
#firstHeader{
    background:#00f;
    height: 100px;
    width: 100%;
    z-index:500;
}
#secondHeader{
    background:#0f0;
    height: 100px;
    width: 100%;
    z-index:500;
}

HTML

<body>
    <div class="spacer"></div>
    <div id="firstHeader">Header 1</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div id="secondHeader">Header 2</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
</body>

JS

function scrollFunction(){
    var sticky1 = $('#firstHeader');
    var sticky2 = $('#secondHeader');

    sticky1.css({
        position: "static",
        top: 0
    });
    sticky2.css({
        position: "static",
        top: 0
    });
    $('body').css({
        "padding-top": 0
    });

    var topOffset1 = sticky1.offset().top;
    var topOffset2 = sticky2.offset().top;

    var stickyHeight1 = sticky1.outerHeight();
    var stickyHeight2 = sticky2.outerHeight();

    var scrollHeight = $(window).scrollTop();

    if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
        sticky1.css({
            position: "fixed",
            top: 0
        });
        sticky2.css({
            position: "static",
            top: 0
        });
        $('body').css({
            "padding-top": stickyHeight1
        });
    }
    else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
        sticky1.css({
            position: "fixed",
            top: - (scrollHeight - (topOffset2 - stickyHeight1))
        });
         sticky2.css({
            position: "fixed",
            top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
        });
        $('body').css({
            "padding-top": stickyHeight1 + stickyHeight2
        });
    }
    else if(scrollHeight >=  topOffset2){
        sticky1.css({
            position: "static"
        });
         sticky2.css({
            position: "fixed",
            top: 0
        });
        $('body').css({
            "padding-top": stickyHeight2
        });
    }
    else{
        sticky1.css({
            position: "static",
            top: 0
        });
        sticky2.css({
            position: "static",
            top: 0
        });
        $('body').css({
            "padding-top": 0
        });
    }

}

$(window).scroll(scrollFunction);

更新的 JS

这应该可以解决屏幕闪烁的问题。

var topOffset1, topOffset2;

function scrollFunction(){

    var sticky1 = $('#firstHeader');
    var sticky2 = $('#secondHeader');

    var stickyHeight1 = sticky1.outerHeight();
    var stickyHeight2 = sticky2.outerHeight();

    var scrollHeight = $(window).scrollTop();

    if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
        sticky1.css({
            position: "fixed",
            top: 0
        });
        sticky2.css({
            position: "static",
            top: 0
        });
        $('body').css({
            "padding-top": stickyHeight1
        });
    }
    else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
        sticky1.css({
            position: "fixed",
            top: - (scrollHeight - (topOffset2 - stickyHeight1))
        });
         sticky2.css({
            position: "fixed",
            top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
        });
        $('body').css({
            "padding-top": stickyHeight1 + stickyHeight2
        });
    }
    else if(scrollHeight >=  topOffset2){
        sticky1.css({
            position: "static"
        });
         sticky2.css({
            position: "fixed",
            top: 0
        });
        $('body').css({
            "padding-top": stickyHeight2
        });
    }
    else{
        sticky1.css({
            position: "static",
            top: 0
        });
        sticky2.css({
            position: "static",
            top: 0
        });
        $('body').css({
            "padding-top": 0
        });
    }

}

$(function(){
    topOffset1 = $('#firstHeader').offset().top;
    topOffset2 = $('#secondHeader').offset().top;
});

$(window).scroll(scrollFunction);

JS 用于可变数量的标题

只需将类 .header 添加到您的 header ，这将适用于任意数量的 header (1、5、100……您明白了)。

这是对上述 JS 的完全替代，每个新 header 都会在旧 header 绑定(bind)到顶部之前将其推到屏幕之外。

请参阅此更新的 jsfiddle 以获取其实际应用示例:http://jsfiddle.net/5bkst/

var topOffset = new Array();

function scrollFunction(){

    var scrollHeight = $(window).scrollTop();
    var headerCounter = 0;
    var scrolled      = 0;
    var headerItems   = $('.header').length;

    $('.header').each(function(index, el){

        var elementHeight = $(this).outerHeight();

        var nextElementHeight = 0;
        var nextElement;

        if(index !== $('.header').length - 1){
            nextElementHeight = $('.header').eq(index + 1).outerHeight();
            nextElement       = $('.header').eq(index + 1);
        }

        if(scrollHeight >= topOffset[headerCounter]
            && (scrollHeight < topOffset[headerCounter + 1] || headerCounter == headerItems-1)){

            scrolled = 1;

            if(scrollHeight >= topOffset[headerCounter + 1] - elementHeight){
                $(this).css({
                    position: "fixed",
                    top: - (scrollHeight - (topOffset[headerCounter + 1] - elementHeight))
                });
                nextElement.css({
                    position: "fixed",
                    top: topOffset[headerCounter + 1] - scrollHeight
                });
                $('body').css({
                    "padding-top": elementHeight + nextElementHeight
                });
                return false;
            }
            else{
                $(this).css({
                    position: "fixed",
                    top: 0
                });
                nextElement.css({
                    position: "static",
                });
                $('body').css({
                    "padding-top": elementHeight
                });
            }

        }
        else{
            $(this).css({
                position: "static"
            });
        }

        headerCounter++;
    });

    if(scrolled == 0){
        $('body').css({
            "padding-top": 0
        });
    }
}

$(function(){
    $('.header').each(function(){
        topOffset.push($(this).offset().top);
    });
});

$(window).scroll(scrollFunction);

关于javascript - 当到达当前卡住的 header 时，用第二个 header 替换粘性 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18938191/

文章推荐： python - 如何将光栅窗口导出到没有地理引用信息的图像？

文章推荐： python - Gunicorn导入错误: No module named app

c - 到达/出发计划
我正在尝试制作一个程序，显示飞机到达和起飞的时间表，然后要求用户在 C 中输入时间。然后程序将找到最接近输入时间的到达时间用户。问题是它没有按预期工作，并且给我一个错误的到达时间，甚至不接近输入的时间
excel - 到达 future 日期时如何更改单元格的颜色
我有一个不断填充新信息行的 Excel 表，其中一列与联系客户的日期(有时为空 - 无需输入日期)相关，如果在 10 内没有收到回复从那以后的几天，我们必须发送提醒，如果过了 17 天，我们必须取消订
rfid - 使用有源RFID标签检测存在(到达/离开)
实际到达很简单，标签进入接收器天线范围，但是偏离是造成问题的原因。首先，我们了解一些有关设置的信息。标签: 它们以433Mhz的速度工作，每1.5秒钟发送一次“心跳”，移动时进入传输突发模式，这种
Android 到达 getInputStream 时崩溃
我构建了这段代码来从 URL 获取 XML我使用了 AsyncTask，当到达 getInputStream() 点时，半身应用程序仍然崩溃重点是我想从 url 获取 XML 作为字符串。我尝试不
Delphi 到达 DBGrid 的行
所以我有一个 TDBGrid，我的目的是搜索 DBGrid 的 Fieldname 并将其与我的编辑的 Text 属性进行比较，如果它们相等，则我想将找到匹配项的整列写入列表框。通过带有 fiel
java - 到达 Controller 时子类型数据丢失
我会写得非常简单，因为实际的修复并不比我不理解的实际设计重要。似乎一旦我的 @RequestBody 命中 @Controller，有关 subtype 的信息就会丢失。假设我们有: class A
java - 到达 N 步的方法数
所以我正在做这个简单的动态编程问题，关于达到 n一次只能走 1 或 2 步。我知道答案基本上是一个斐波那契序列，答案是:达到n-2的步骤数+ 到达 n-1 的步数. T(n) = T(n-1) +
javascript - 到达 anchor 标记时如何启动功能
(function start (){ $('.bar').each(function(i){ var $bar = $(this); $(this).append('')
java - 到达 main 方法的末尾时程序不会终止
我有一个程序，我在启动它之前要求用户输入。 public static void main(String args[]) { String database = JOptionPane.sho
html - 提交到达根本没有图片
就是这样，我必须在提交按钮上有一张图片，但它根本没有出现。我希望它看起来像这样: 现在看到我的是这样的，我不明白为什么它没有出现在页面上。 HTML CSS #sognu { bac
javascript - 到达 div 的顶部
click here 点击后重定向至 xyz.com/#contact，现在我想获得div #abc的顶部位置 //set the value as a variable, and remove t
javascript - 到达 scrollspy 部分的末尾时强制停止滚动
here is a fiddle to know where I am starting from 我要解决的问题涉及对单个 html 文件的内容进行“分页”，以一种将它们一次锁定在一个部分中的方式。
javascript - 到达 anchor 标记时如何运行javascript函数？
是否可以在传递页面部分时运行 javascript 函数？我想要实现的是类似于 Twitter Bootstrap 的 scrollspy。最佳答案您可以使用 waypoints 插件: http
javascript - 到达 iframe 底部时触发函数
我有一个可以动态调整其大小的 iframe。我通过父页面上的发布消息和监听器解决了这个问题，因此每次 iframe 的内容发生变化时，iframe 的大小也会发生变化，并且永远不会有滚动条。在 if
javascript - 到达 anchor 时使导航栏透明
我试图让我的导航栏在到达我在网站下方设置的 anchor 时变得透明。这是我的HTML Home About Logo W
c++ - 到达 void 函数的结尾会产生意想不到的结果
我写了一个简单的程序来管理姓名列表(下面是程序的一部分)。我希望函数“choice()”结束并返回到 main()——从而结束程序——当用户对变量“option”的输入为 4 时。然而，choice(
linux - 到达 monowall 后面的内部服务器
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
c - 到达 EOF 后读取文件
代码片段在 while 循环后有一个 EOF，之后必须再次重新打开文件 - fopen 被重用。我的问题是是否有办法避免这种笨拙的 fopen 双重使用或以某种方式不使用 EOF？ if (!(f=f
css - 到达 css 节点时遇到问题
从这个页面: http://www.beta.inegi.org.mx/app/buscador/default.html?q=e15a61a 我正在尝试检索此网址: http://www.beta.
python - 到达 JSON 中未知值后面的字符串
我使用维基百科的 API 来获取有关页面的信息。API 给我这样的 JSON: "query":{ "pages":{ "188791":{ "pageid":18879

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当到达当前卡住的 header 时，用第二个 header 替换粘性 header

CSS

HTML

JS

更新的 JS

JS 用于可变数量的标题