分区位于其容器顶部可见区域

-2

我将使用有关我想要执行的操作的示例。我有一个3页的网页。分区位于其容器顶部可见区域

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

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

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

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

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

谢谢。

来源

2014-03-25 ajimenez

告诉我你到目前为止尝试过什么......产生一些小提琴。 – Gourav

我还没有尝试过任何东西，只是在想如何去做。我在考虑把位置相对于默认的div。通过javascript捕获页面位置，当页面下降时，转换为'position：absolute'和'top：0'，并且当该部分完全关闭时再转到相对位置。但我不喜欢这种方法。我会尝试创建一些小提琴示例。 – ajimenez

这里是基本的小提琴结构，没有任何关于右列的位置的样式： [http://jsfiddle.net/2cKb4/](http://jsfiddle.net/2cKb4/）我喜欢有如果div.section在向下滚动页面时可见，但在到达该部分底部时停止移动，则带有“TEXT”的div始终可见。和同样的行为再次上升。 – ajimenez

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

我只想在第一部分中使用这种效果，这就是为什么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; 
}

做有什么看法呢？任何改善效果的建议

来源

2014-03-25 13:01:00 ajimenez

分区位于其容器顶部可见区域

回答

相关问题