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

Question

As I have had such quick and relevant help on here before now, I thought I would come back with another query. 由于我之前在这里有过如此快速和相关的帮助，我想我会再回来查询。

I like this: http://jsfiddle.net/Tgm6Y/4624/ 我喜欢这个： http ： //jsfiddle.net/Tgm6Y/4624/

    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');

as provided by MicronXD. 由MicronXD提供。

I'm looking for a div to scroll until the top of it hits the top of the screen and then for it to stay fixed there until it hits the top of the div below it, in my case, the footer of the document. 我正在寻找一个div滚动，直到它的顶部击中屏幕的顶部，然后它保持固定，直到它击中它下面的div的顶部，在我的情况下，文档的页脚。

The parent div does not have a specified height, but is determined by the page content. 父div没有指定的高度，但由页面内容决定。

Forgive me if this has been answered elsewhere, but in my searching, I couldn't find anything that quite fitted what I'm after. 请原谅我，如果这已在其他地方得到解答，但在我的搜索中，我找不到任何适合我所追求的东西。

Many thanks in advance, 提前谢谢了，

Mark 标记

I have added the code as suggested in Matmarbon's jsfiddle below and wrapped it in the code given in his comment. 我已经在下面的Matmarbon的jsfiddle中添加了代码，并将其包含在他的评论中给出的代码中。 Sadly all I have been able to achieve is that the child element does indeed stay fixed, and only when the top of it hits the top of the screen, but when it meets the div below, where it is supposed to stop, it keeps going and overlaps it. 可悲的是，我所能实现的是，子元素确实保持固定，并且只有当它的顶部击中屏幕的顶部时，但是当它遇到下面的div时，它应该停在那里，它会继续并重叠它。

I would obviously like some more help, but don't know what to do about getting any. 我显然想要更多的帮助，但不知道如何做任何事情。 Should I redirect you to the page I am attempting to achieve this on. 我应该将您重定向到我试图实现此目的的页面。 It's http://piciscan.co.uk/experiment/slide-scanning-service in case it helps. 这是http://piciscan.co.uk/experiment/slide-scanning-service ，以防万一。

I'm at quite a loss and would appreciate some more help. 我很茫然，会感激一些帮助。 Thanks in advance. 提前致谢。

Mark 标记

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

RIGHT!!! 对！！！ SORTED IT!!! 分拣!!! I have on the above mentioned page, tabbed navigation showing different options to customers for having their slides scanned. 我在上面提到的页面上，选项卡式导航显示了客户扫描幻灯片的不同选项。 This runs on js and requires 这在js上运行并且需要

<body onload="init()">

for it to work. 它的工作原理。 Removing that bit of code makes the scrolling div work as desired. 删除该位代码使滚动div按需运行。 Sadly, it removes the function of the tabbed navigation. 遗憾的是，它删除了选项卡式导航的功能。 But, no matter, I have found another way of producing tabbed navigation that does not require the 'onload' function to work. 但是，无论如何，我发现了另一种生成标签式导航的方法，它不需要“onload”功能。

In case anyone is interested, it looks like this: 如果有人有兴趣，它看起来像这样：

First, the javascript, positioned in the head: 首先，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>

Now the html: 现在的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>

The accompanying css: 随附的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;}

And, finally, the jQuery: 最后，jQuery：

<script type="text/javascript">

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

</script>

Hopefully that will help someone. 希望这会对某人有所帮助。

Answer 1

Like this ( jsfiddle )? 喜欢这个（ 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

You could use the brand new (2014) position: sticky; 你可以使用全新（2014）的position: sticky; value which is made exactly for this! 完全为此做出的价值！ But be aware, that it only works in FF ≥ 32.0.1 and Safari ≥ 6.1 with position: -webkit-sticky; 但请注意，它仅适用于FF≥32.0.1和Safari≥6.1，其position: -webkit-sticky; but almost no other browsers yet. 但几乎没有其他浏览器。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-05-14 21:34:01

解决方案2
1 2014-09-20 10:50:52

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-05-14 21:34:01

解决方案2 1 2014-09-20 10:50:52

解决方案1
1 已采纳 2013-05-14 21:34:01

解决方案2
1 2014-09-20 10:50:52