如何让DIV悬浮在滚动固定位置
div触顶固定悬浮在浏览器顶部就是某个版块,当浏览器拉动到这个DIV的位置时就会自动悬浮固定在浏览器顶部。如下图:
下面学做网站论坛就来介绍一下如何实现div触顶固定悬浮在浏览器顶部效果。
方法/步骤
- 在代码顶部</head>标签上方引入JQUERY;引入方法见:网页如何引入JQuery
- 在需要触顶固定悬浮在浏览器顶部的DIV代码中添加一个ID代码
id="pordAttr"
- 在代码底部</body>标签上面添加以下的JS代码,实现DIV触顶固定悬浮在浏览器顶部。
<script type="text/javascript">
$(function () {
var elm = $('#pordAttr');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(elm).css('position', ((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top', ((p) > startPos) ? '0px' : '');
});
});
</script>