如何让网站导航在滚动时悬浮固定位置
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>
另外一种方法:
- 在代码顶部</head>标签上方引入JQUERY;
- 在style.css中添加以下的样式代码:
div.sticky {
position: fixed;
width: 100%;
background-color: #fff;
z-index: 99;
box-shadow: 0 1px 3px rgba(0, 0, 0, .11);
top: 0;
} - 在代码底部</body>标签上面添加以下的JS代码,实现DIV触顶固定悬浮在浏览器顶部。btm-header为导航的class名。
<script type="text/javascript">
$(window).scroll(function(){
var scroH = $(this).scrollTop();
if(scroH>=50){
$(".btm-header").addClass('sticky');
}else if(scroH<50){
$(".btm-header").removeClass('sticky');
}
})
</script>