Question

由于我之前在这里有过如此快速和相关的帮助，我想我会再回来查询。

    var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

由MicronXD提供。

我正在寻找一个div滚动，直到它的顶部击中屏幕的顶部，然后它保持固定在那里直到它击中它下面的div的顶部，在我的情况下，它的页脚文档。

父div没有指定的高度，但由页面内容决定。

请原谅我，如果这已在其他地方得到解答，但在我的搜索中，我找不到任何适合我所追求的东西。

非常感谢，

标记

我添加了下面Matmarbon的jsfiddle中建议的代码，并将其包含在他的评论中给出的代码中。可悲的是，我所能实现的是，子元素确实保持固定，并且只有当它的顶部击中屏幕的顶部时，但是当它遇到下面的div时，它应该停在那里，它会继续并重叠它。

我显然想要更多帮助，但不知道如何处理任何问题。我应该将您重定向到我试图实现此目的的页面。它是http://piciscan.co.uk/experiment/slide-scanning-service以防万一。

我很茫然，希望得到更多的帮助。提前谢谢。

标记

[编辑2013-05-17 10:09:53]

RIGHT !!!分拣!!!我在上面提到的页面上，选项卡式导航显示了客户扫描幻灯片的不同选项。这在js上运行，需要

<body onload="init()">

让它发挥作用。删除该位代码使滚动div按需运行。遗憾的是，它删除了选项卡式导航的功能。但是，无论如何，我发现了另一种生成标签式导航的方法，它不需要“onload”功能。

如果有人感兴趣，它看起来像这样：

首先，javascript位于头部：

<script type="text/javascript">

var previoustab=""

function showMe(cid){
if (document.getElementById){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
return false
}
else
return true
}


function loadForm(){
showMe("page1")
}

if (window.addEventListener)
window.addEventListener("load", loadForm, false)
else if (window.attachEvent)
window.attachEvent("onload", loadForm)
else if (document.getElementById)
window.onload=loadForm

</script>

现在是html：

<ul id="tabs">

    <li><a href="#firstinfo" onClick="return showMe('page1')" class="selected">
First Info</a></li>
    <li><a href="#secondinfo" onClick="return showMe('page2')">
Second Info</a></li>
    <li><a href="#thirdinfo" onClick="return showMe('page3')">
Third Info</a></li>

</ul>    

<div id="tabwrapper">

    <div id="page1" class="content">

    <h2>Here's some information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page2" class="content">

    <h2>Here's some more information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page3" class="content">

    <h2>And some MORE information</h2>

    blah<br>blah<br>blah

    </div>

    </div>

随附的CSS：

ul#tabs         {list-style: none;
            margin: 30px 0 0 0;
            padding: 0 0 3px 0;}

ul#tabs li      {display: inline;}

ul#tabs li a        {color: #42454a;
            background-color: #dedbde;
            border: 0;
            padding: 0.3em;}

ul#tabs li a:hover  {background-color: #f1f0ee;}

ul#tabs li a.selected   {color: #000;
            background-color: #f1f0ee;
            font-weight: bold;
            padding: 0.7em 0.3em 0.38em 0.3em;}

#tabwrapper     {border: 0;
            padding: 0.5em;
            background-color: #f1f0ee;}

.content        {display: none;}

最后，jQuery：

<script type="text/javascript">

$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );
});

</script>

希望这会对某人有所帮助。

Answer 1

喜欢这个（jsfiddle）？

...
        bumperPos = $bumper.offset().top,
        startingPos = $this.offset().top,
        defaultPosType = $this.css('position'),
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight - startingPos)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight - startingPos)
                });
            } else if ($window.scrollTop() < (startingPos)) {
                $this.css({
                    position: defaultPosType,
                    top: startingPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    ...

...

#zero {
    width:100%;
    height: 200px;
    background-color: yellow;
}

#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
}

...

...
    <div id="zero">CONTENT ABOVE</div>
...

Answer 2

你可以使用全新的（2014）position: sticky; value，这是为了这个！但请注意，它只能在FF≥32.0.1和Safari≥6.1中使用position: -webkit-sticky;，但几乎没有其他浏览器。

修复父div中的位置div，以防止子div向下滚动页面

2 个答案: