0

由于我之前在这里得到了如此快速和相关的帮助，我想我会带着另一个问题回来。

我喜欢这个：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');

由 MicronXD 提供。

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

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

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

提前谢谢了，

标记

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

我显然想要更多帮助，但不知道该怎么做。我是否应该将您重定向到我试图实现这一目标的页面。如果有帮助，请访问 http://piciscan.co.uk/experiment/slide-scanning-service。

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

标记

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

正确的！！！排序它！我在上面提到的页面上有标签式导航，向客户显示扫描幻灯片的不同选项。这在 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>

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

4

2 回答 2

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>
...
于 2013-05-14T21:34:01.067 回答
1

您可以使用专为此而设计的全新 (2014)position: sticky;值！但请注意，它仅适用于 FF ≥ 32.0.1 和 Safari ≥ 6.1，position: -webkit-sticky;但几乎没有其他浏览器。

于 2014-09-20T10:50:52.887 回答