在下面的示例中,我能够在某个点上滚动时将右div停留在顶部,但是左div不能使用相同的方法,它会破坏整个布局,因为我必须使div固定,并且当它固定时,流过页面!
JSFiddle在这里http://jsfiddle.net/xt9y7hqu/2/
任何帮助将不胜感激。感谢
$(function() {
var ele = "#rightPanel";
$(window).scroll(
function(){
stick_right(ele);
});
$( window ).resize(function() {
stick_right(ele);
});
stick_right(ele);
});
function stick_right(ele){
$(ele).css("top", Math.max(0,($('#sticky-anchor').offset().top) - $(this).scrollTop()));
$(ele).css("left", $('#centerPanel').position().left + $('#centerPanel').outerWidth());
}
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navbar navbar-default'>
<h3>
Navbar
</h3>
</nav>
<div class='container' id='sticky-anchor'>
<div class='col-xs-3' id='leftPanel' style='background: pink'>
<h3>
Sticky Left div
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div class='col-xs-5' id='centerPanel' style='background: lightblue'>
<h3>
None Sticky center div
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class='col-xs-4' id='rightPanel' style='background: lightgreen; position: fixed'>
<h3>
Sticky Right div
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
</div>
<br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
干得好。查看您的示例的工作字段。
$(function() {
var ele = "#rightPanel";
$(window).scroll(
function(){
stick_right(ele);
var windowTop = $(window).scrollTop();
var panelTop = $('#leftPanel').offset().top;
if(windowTop > panelTop){
$('#leftPanel').offset({'top': windowTop });
}else{
$('#leftPanel').offset({'top':$('#rightPanel').offset().top});
}
});
$( window ).resize(function() {
stick_right(ele);
});
stick_right(ele);
});
function stick_right(ele){
$(ele).css("top", Math.max(0,($('#sticky-anchor').offset().top) - $(this).scrollTop()));
$(ele).css("left", $('#centerPanel').position().left + $('#centerPanel').outerWidth());
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句