Question

我要做的是让我的网站http://horizonworks.lddesigns.co.uk上的标题停留在页面顶部，但当用户滚动到页面中的某个点时，会出现另一个标题并粘贴到顶部屏幕。

我已经在这个网站http://leighton.com看到了它，并想知道它是如何完成的！

Answer 1

也许

<强> [1]

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

或

<强> [2]

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

将 40 更改为用户必须滚动到“实现”的像素数。我会使用＃2 来保存内存。

Answer 2

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

我做了一个POC：http://jsfiddle.net/ashishanexpert/5Ft4j/

<强> 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>

<强> CSS：

.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%}

<强>的JavaScript / jQuery的：

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

祝你好运!!

Answer 3

我强烈推荐带有“粘性”附加组件的Waypoints jQuery plugin。按照说明操作。类似的东西：

$('.header').waypoints('sticky')

使用sticky，您必须将自己的CSS添加到名为“卡住”的类中。类似的东西：

.stuck{ position:fixed; top:-60px; }

滚动时单独的标题div

3 个答案: