jquery滚动条导航栏怎么固定?方法示例

发布时间:2020-06-05编辑:脚本学堂
有关jquery滚动条如何固定导航栏的方法,当滚动条滚动到一定高度时,将导航栏固定,jquery滚动条的常用操作方法,大家参考下。

jquery/scrollbar/ target=_blank class=infotextkey>jquery滚动条导航栏固定

实现原理:得到当前的滚动高度,判断当前滚动高度大于某个高度时,对导航栏设置其样式,将导航栏固定。
否则,还原导航栏的样式。

例子:
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery滚动条导航栏固定_www.jb200.com</title>

<style>

body,p,div,ul,li{margin:0px;padding:0px;}

p{text-align:center;}

.nav{border:1px solid green;position:relative;height:30px;}

.nav ul{list-style-type:none;height:30px;background:#333;}

.nav ul li{float:left;width:100px;text-align:center;height:30px;line-height:30px;}

.nav ul li a:link{color:white;text-decoration:none;}

.nav ul li a{display:block;}

.nav ul li a:hover{background:#f60;}

.show{background:#f60;}

.fixednav{position:fixed;top:0px;left:0px;width:100%;}

.nav ul li>ul li{background:blue;}

</style>

<script type="text/javascript" src="../../jquery.js"></script>

<script>

$(function(){

var nav=$(".nav"); //得到导航对象

var win=$(window); //得到窗口对象

var sc=$(document);//得到document文档对象。

win.scroll(function(){

if(sc.scrollTop()>=60){

nav.addClass("fixednav");

$(".navTmp").fadeIn();

}else{

nav.removeClass("fixednav");

$(".navTmp").fadeOut();

}

}) 

//鼠标经过li对象时,查找li下的ul.

$("ul li").hover(function(){

$(this).find("ul").show();

},function(){

$(this).find("ul").hide();

})

})

</script>

</head>

<body>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<div class="navTmp" style="display:none;height:30px;"></div>

<div class="nav">

<ul>

<li class="show"><a href="#">首页</a></li>

<li><a href="#">随笔</a>

<ul style="display:none;">

<li><a href="#">人生感悟</a></li>

<li><a href="#">成功励志</a></li>

<li><a href="#">生活锁事</a></li>

</ul>

</li>

<li><a href="#">素材</a></li>

<li><a href="#">编程</a></li>

</ul>

</div>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

<p>我爱学习</p>

</body>

</html>


jquery判断滚动条滚到页面底部并执行事件


三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。
clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。
scrollTop:这个是什么呢?可以理解为滚动条可以滚动的长度。

举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

如何判断是否滚动到底部?

首先,拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是:[0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端:scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内:(offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内:scrollTop / (offsetHeight – clientHeight) >= 0.95
如上。

例子,拉到底部自动加载内容,只要注册个滚动条事件:
 

复制代码 代码示例:
scrollBottomTest =function(){ 
$("#contain").scroll(function(){ 
var $this =$(this), 
viewH =$(this).height(),//可见高度 
contentH =$(this).get(0).scrollHeight,//内容高度 
scrollTop =$(this).scrollTop();//滚动高度 
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容 
if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容 
// 这里加载数据.. 
}
});
}