如何使用JavaScript或jQuery使左右div固定在滚动顶部?

穆罕默德

在下面的示例中,我能够在某个点上滚动时将右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>

Gschambial

干得好。查看您的示例工作字段

 $(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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

使用 jquery 向下滚动后,表格未固定在顶部

来自分类Dev

如何仅使用css使内容固定在滚动div中?

来自分类Dev

Div,固定在底部,固定在顶部

来自分类Dev

使用香草JavaScript滚动时,使菜单栏固定在顶部

来自分类Dev

滚动时如何将导航栏固定在顶部?

来自分类Dev

滚动后固定在顶部的导航

来自分类Dev

jQuery位置DIV固定在滚动条上

来自分类Dev

javascript固定在滚动位置

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

滚动95个像素后显示固定在页面顶部的Div

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

如何使用左右按钮滚动div水平

来自分类Dev

将相对div固定在屏幕顶部

来自分类Dev

JQUERY:为什么向下滚动时我的导航仪没有固定在顶部?

来自分类Dev

滚动时如何保持<li>元素固定在<ul>元素的顶部和底部

来自分类Dev

向下滚动时如何使标题和导航栏都固定在顶部

来自分类Dev

如何使导航栏固定在顶部

来自分类Dev

如何使终端光标固定在顶部?

来自分类Dev

使用jQuery滚动到父div顶部

来自分类Dev

使div固定在页面上以角度滚动

来自分类Dev

css相对位置并滚动时固定在顶部

来自分类Dev

将元素固定在滚动页面的顶部

来自分类Dev

网站设计-固定在顶部并展开的滚动菜单

来自分类Dev

向下滚动时,导航栏变为透明并固定在顶部

来自分类Dev

向下滚动到时,将导航栏固定在顶部

来自分类Dev

CSS位置:滚动时固定在左侧或顶部

来自分类Dev

滚动时使菜单栏固定在顶部

Related 相关文章

热门标签

归档