Jquery 卷轴上的单独标题div

我试图做的是让我在站点上的标题保持在页面顶部，但是当用户滚动到页面中的某个点时，另一个标题会出现并粘在屏幕顶部

我在这个网站上看到过，想知道是怎么做到的

也许吧

[1]

window.setInterval(function()
{
    if(window.scrollTop == 40)
    {
        document.getElementById('yourHeader').style.top = window.scrollTop.toString() + 'px';
    }
}, 500);

var update = window.setInterval(function()
{
    if(window.scrollTop == 40)
    {
        document.getElementById('yourHeader').style.position = 'fixed';
        clearInterval(update);
    }
}, 500);

或

[2]

window.setInterval(function()
{
    if(window.scrollTop == 40)
    {
        document.getElementById('yourHeader').style.top = window.scrollTop.toString() + 'px';
    }
}, 500);

var update = window.setInterval(function()
{
    if(window.scrollTop == 40)
    {
        document.getElementById('yourHeader').style.position = 'fixed';
        clearInterval(update);
    }
}, 500);

---

将40更改为用户必须滚动到“使其发生”的像素数。我将使用#2来保存内存。

好的，您只需检查窗口滚动条上的窗口滚动条顶部位置，然后将其与目标div位置进行比较

我做了一个POC：

HTML:

<div class="header">Default Header</div>
<div class="content1">Content 1</div>
<div class="content2">Content 2</div>
<div class="header2">Another Header</div>

.header{background:#F00; height:100px}
.content1{background:#00C; height:600px}
.content2{background:#0C0; height:600px}
.header2{background:#666; height:100px; position:fixed; top:-100px; width:100%}

$(function(){
    $(window).bind("scroll", function(){
        var winPos = $(window).scrollTop(),
            divPos = $(".content2").offset().top, // If you want you can set a fix value here also
            newPos = winPos >= divPos ? 0 : -100;

         $(".header2").stop().animate({
             top : newPos
         });
    });
});

JavaScript/jQuery:

<div class="header">Default Header</div>
<div class="content1">Content 1</div>
<div class="content2">Content 2</div>
<div class="header2">Another Header</div>

.header{background:#F00; height:100px}
.content1{background:#00C; height:600px}
.content2{background:#0C0; height:600px}
.header2{background:#666; height:100px; position:fixed; top:-100px; width:100%}

$(function(){
    $(window).bind("scroll", function(){
        var winPos = $(window).scrollTop(),
            divPos = $(".content2").offset().top, // If you want you can set a fix value here also
            newPos = winPos >= divPos ? 0 : -100;

         $(".header2").stop().animate({
             top : newPos
         });
    });
});

祝你好运

我强烈推荐使用“粘性”附加组件。按照指示去做就行了。比如：

$（'.header'）。航路点（'sticky'）

使用

sticky

，您必须将自己的CSS添加到名为“stack”的类中。类似于：

。卡住了{
位置：固定；
顶部：-60px；
} /代码> 
检查滚动偏移并显示<代码> div <代码> >代码>位置：固定。谢谢，我正处于使它工作的中间，我希望它在滚动到某个点时淡入淡出，然后在滚动过相同的点时淡出，如果有意义的话。