html中顶部菜单栏特效代码,jQuery实现固定在⽹页顶部的菜单
效果代码
本⽂实例讲述了jQuery实现固定在⽹页顶部的菜单效果代码。分享给⼤家供⼤家参考。具体如下：
这是⼀款基于jQuery的固定在页⾯顶部的菜单，获取要定位元素距离浏览器顶部的距离，滚动条的滑动距离⼤于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定。
运⾏效果截图如下：
在线演⽰地址如下：
具体代码如下：
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
固定在顶部的菜单
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离⼤于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
}else if(scroH
$(".nav").css({"position":"static","margin":"0 auto"});
}
console.log(scroH==navH);
})
})
*{ margin:0px; padding:0px;}
.
top{
height:900px;
background:#009999;
}
.nav{
width:400px;
margin:0 auto;
border-bottom:1px solid #F00;
}
.nav ul:after{
clear:both;
content:"";
display:table;}
.nav ul li{
background:#FFFFFF;
float:left;
width:70px;
border:2px solid #06F;
text-align:center;
height:28px;html滚动效果代码
line-height:28px;
list-style:none;}
.
cl01,.cl02,.cl03,.cl04,.cl05,.cl06,.cl07,.cl08{ height:300px;}
.cl01{
background:#333;}
.cl02{
background:#F00;}
.cl03{
background:#FFFF00;}
.cl04{
background:#0FF;}
.cl05{
background:#030;}
.
cl06{
background:#006699;} .cl07{
background:#930;}
.cl08{
background:#969;}
测试1
测试2
测试3
测试4

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。