jQuery bootstrap - 如何使 div 在滚动时始终可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17789007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap - how to make a div always visible on scrolling
提问by nubinub
I'm trying to find a way to display a div, allays visible for a user. Scrolling.. that's my problem, see:
我试图找到一种方法来显示一个 div，一个用户可见的 allays。滚动..那是我的问题，请参阅：
http://jsfiddle.net/makypl/966Uy/1/
http://jsfiddle.net/makypl/966Uy/1/
This div should stay under div.left2 while scrolling down and get back to his original position while scrolling up.
这个 div 应该在向下滚动时保持在 div.left2 下，并在向上滚动时回到原来的位置。
<div id="wrapper">
<div id="l">
<div class="left">
<p class="trigger">Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1</p>
</div>
<div class="left2">
<p class="trigger">Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2</p>
</div>
<div class="thisone">
<p>This one should stay always visible
<p>
</div>
</div>
<div class="right">
<p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
</div>
</div>
any suggestion welcome thanks
任何建议欢迎谢谢
回答by Pascamel
Use Bootstrap Affix, here is an example : http://bootply.com/62673
使用 Bootstrap 词缀，这里是一个例子：http: //bootply.com/62673
回答by nubinub
var top = $('.thisone').offset().top;
$('.trigger').click(function () {
$('.thisone').css('position','');
$('.left2').toggle('slow',function(){
top = $('.thisone').offset().top;
});
});
$(document).scroll(function(){
//calculating the minimal top position of the div
$('.thisone').css('position','');
top = $('.thisone').offset().top;
$('.thisone').css('position','absolute');
$('.thisone').css('top',Math.max(top,$(document).scrollTop()));
});
This should do the trick. http://jsfiddle.net/966Uy/11/
这应该可以解决问题。 http://jsfiddle.net/966Uy/11/
Edit:Made a few adjustment cause a bug could appear if the user scrolled during the animation.
编辑：做了一些调整，如果用户在动画过程中滚动，可能会出现一个错误。
