Question

我将使用一个关于我想做什么的例子。我有一个包含3个部分的网页。

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

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

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

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

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

感谢。

Answer 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;
}

有什么想法呢？任何提高效果的建议

Div位于其容器的顶部可见区域

1 个答案: