jquery 让DIV在规定的高度内随着页面滚动而滚动。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 让DIV在规定的高度内随着页面滚动而滚动。相关的知识,希望对你有一定的参考价值。

超过规定的高度则不滚动

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function () 
var maxHeight = 1500;//跟随滚动条最大高度
var marginTop = 0;//距离顶部的间距
$('#title').css('top', marginTop);
$(window).scroll(function() 
var scrollTop = $('body').scrollTop();
if(maxHeight < scrollTop + marginTop && $('#title').css('position') == 'fixed') 
$('#title').css('position', 'absolute').css('top', scrollTop + marginTop);
 else if (maxHeight >= scrollTop + marginTop && $('#title').css('position') == 'absolute') 
$('#title').css('position', 'fixed').css('top', marginTop);

);
);
</script>
</head>
<body style="height: 3000px;">
<div id="title" style="width: 99%; height: 50px; background: #C1C1C1; position: fixed; top: 0px;">我是浮动栏</div>
</body>
</html>

给你HTML代码你试一下,我设定的是body高度3000,在1500的地方停止跟随滚动条

追问

貌似没效果~ 会一直滚动

参考技术A 思路:判断div在距离浏览器顶端距离为某个范围内的时候,设置div的position为relative,其他为fixed;

以上是关于jquery 让DIV在规定的高度内随着页面滚动而滚动。的主要内容,如果未能解决你的问题,请参考以下文章

如何让DIV模块随着页面固定和不固定随意切换

jQuery 怎么让浮动div随着浏览器窗口滚动而滚动?

如何让DIV固定在页面而不随着滚动条随意滚动

如何让DIV固定在页面而不随着滚动条随意滚动

使用 jQuery 获取 div 的可见高度

如何让jquery动画效果在屏幕滚动到指定位置才执行