html中怎么让div自动滑动,干货！div滚动到一定位置就固定他

尊重原创：转载请申明出处

div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后

右边的数据就看不到了，所以可以在滚动到一点层度后保持右边的数据不动不随着滚动条的滚动而

滚动,这样不会只看到一边的内容，另外一边是空白的情况,用户体验很更好，颜值会更高....。

废话不多说！直接上代码 。

不要小看这点代码，自己一点一点写还是会遇到坑的，会花不少时间的，抛砖引玉，分享才会创造更多价值

首页

.mydiv {

margin-left: 200px;

width: 180px;

height: auto;

background: #ff5555;

overflow: auto;

}

.content {

display: -webkit-box !important;

display: -moz-box !important;

display: -o-box !important;

display: -webkit-flex !important;

display: -ms-flexbox !important;

display: flexbox !important;

display: flex !important;

display: box !important;

flex-direction: row;

}

新年好

hello girl1

hello girl2

hello girl3

$(window).scroll(function () {

//获取滚动条的高度

var scrollTop = $(this).scrollTop();

//获取一个屏幕的高度

var windowHeight = document.body.clientHeight;

console.log("div本身的高度:" + $('#rightdiv').height());

console.log("距离顶部的的位置" + scrollTop);

//当滚动条滚动到一边的最底部，把需要的div滚动到底部就固定div不让移动了

if (scrollTop > $('#rightdiv').height() - windowHeight) {

$("#rightdiv").css("position", "fixed"); //固定div让其不随着滚动条的滚动而滚动

$("#rightdiv").css("bottom", "10px");

}

else {

$("#rightdiv").css("position", "static");//恢复div可以跟随滚动条滚动

}

});

怎么判断滚动条是否滚动到一边的最底部

其实不是scrollTop=右边的高度就行，这样的话不是滚动到最低部，而是右边的内容刚好已经滚动完了，所以还应该减去一个屏幕的高度，其实画个图就很好理解了

根据这个图我们可以很容易的看出来。此时滚地条的位置 = 右边的高度(需要固定的高度)- 屏幕的高度

浮动布局的情况

这里左右两边的div用的是flex布局，也可以使用浮动，但是如果是使用浮动的情况，设置了position：fixed浮动就会失效了，就会出现左边两边页面重叠的情况，这个时候其实也好解决因为设置了固定布局后可以设置left,这种属性，可以在加载完成的时候先获取他的位置，然后在需要固定的时候设置这个位置即可//在加载完成的时候先获取他的位置

var cirhgtleft = $("#crightdiv").offset().left;

//在需要固定的时候设置这个位置即可

$("#crightdiv").css("left", cirhgtleft);

在实际运用中，可能还会遇到一些细节问题，就需要大家自己去摸索了

例如设置了固定布局后宽度百分比就会是相对整个浏览器，整个时候可以先获取一下div的宽度，在需要固定的

时候把这个宽度给他就行了，不然当固定div的时候宽度会发生变化

注意:当html使用了DOCTYPE申明，获取浏览器高度的方法需要调整一下

这个时候如果使用：document.body.clientHeight

获取的不是一个屏幕的高度，而是个页面的高度!!!.

也可以参考一下下面的方法获取//获取浏览器高度

function findHeigt()

{

var winHeight = 0;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

return winHeight;

}

欢迎加群讨论技术，群号：677373950