Div 位于其容器可见的顶部答案

【问题标题】：Div positioned in top visible of their containerDiv 位于其容器可见的顶部
【发布时间】：2014-03-25 21:01:00
【问题描述】：

我将使用一个示例来说明我想要做什么。我有一个包含 3 个部分的网页。

这 3 个部分中的每个部分都有两列。左列是元素列表，右列是基于列表元素并动态更新的说明文本。

问题是这个左栏可能很长，并且当用户向下滚动时在小屏幕上看不到右栏中的文字。

我喜欢做的是将右栏内容放在可见页面的顶部。因此，如果我们位于该部分的开头，则文本位于右列的顶部。但是，当我们向下滚动该部分时，右栏中的此文本会随着页面向下移动，直到该部分容器的末尾。

有没有人知道一些插件或 CSS/Javascript 技术来实现这一点？我正在使用 jQuery 和 Bootstrap。

我在一些网站上看到过类似的效果，但现在找不到了。

谢谢。

【问题讨论】：

告诉我你到目前为止都尝试过什么......制作一些小提琴。
我还没有尝试任何东西，只是在想怎么做。默认情况下，我正在考虑相对于 div 的放置位置。并通过 javascript 捕获页面位置，当页面关闭时，更改为“位置：绝对”和“顶部：0”，当该部分完全关闭时再次转到相对位置。但我不太喜欢这种方法。我将尝试创建一些小提琴示例。
这是基本的小提琴结构，没有任何关于右列位置的样式：http://jsfiddle.net/2cKb4/ 我喜欢让带有“TEXT”的 div 始终可见，如果 div.section 当你看到它时它是可见的向下滚动页面，但到达该部分的底部时停止移动。并且再次出现相同的行为。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

最后我制作了这个脚本来创建我想要的效果。

我只希望在第一部分有这个效果这就是为什么s只适用于第一个，但不难传播所有。

http://jsfiddle.net/2cKb4/1/

HTML

<div id="section1" class="section">
   <div class="leftCol">
    <ul>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
        <li>element</li>
    </ul>
    </div>
    <div class="rightCol">
        <div>TEXT line</div>
    </div>
</div>

CSS

.section {
    border: 1px solid;
    width: 90%;
    padding: 5px;
    margin: 5px;
    display: inline-block;
}

.leftCol {
    width: 45%;
    float: left;
    border-right: 1px solid;
    margin-right: 4%
}

.posFixed {
    position:fixed;
}

.rightCol {
    width: 50%;
    float: left;
}

Javascript：

jQuery(document).ready(function(){
    $(window).scroll(function(){
        var section = $('#section1');
        if (isTopElementInview(section)) {
            section.find('.rightCol div').removeClass('posFixed');
        } else if (isBottomElementInview(section)) {
            section.find('.rightCol div').addClass('posFixed');
        } else {
            section.find('.rightCol div').removeClass('posFixed');
        }
    });
});

function isTopElementInview(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;

    return elemTop <= docViewBottom && elemTop >= docViewTop;
}

function isBottomElementInview(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemBottom = $(elem).offset().top + $(elem).height();

    return elemBottom <= docViewBottom && elemBottom >= docViewTop;
}

对此有何看法？任何改善效果的建议

【讨论】：