jquery实现企业定位式导航效果
更新时间：2018年01月01日 11:03:30 作者：hjw453321854
这篇文章主要介绍了jquery实现企业定位式导航效果
本文实例为大家分享了jquery实现企业定位式导航的具体代码，供大家参考，具体内容如下
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.nav{width:100%;position:absolute;top:150px;}
.nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;}
.nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;}
.nav ul li:hover{background:#666;}
.nav ul li a{color:#000;font-size:18px;text-decoration:none;}
.nav .active{background:#666;}
.cont{width:1200px;height:4500px;margin:0 auto;}
.cont ol{width:1200px;height:4500px;margin:0 auto;}
.cont ol li{width:1200px;height:500px;list-style:none;}
.cont ol li p{color:#000;font-size:48px;}
</style>
</head>
<body>
<div style="height:200px;width:100%;"></div>
<div class="nav">
<ul>
<li class="active">page1</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
<li>page8</li>
</ul>
</div>
<div class="cont">
<ol>
<li style="background:#aaa"><p>page1</p></li>
<li style="background:#999"><p>page2</p></li>
<li style="background:#666"><p>page3</p></li>
<li style="background:#333"><p>page4</p></li>
<li style="background:#bbb"><p>page5</p></li>
<li style="background:#aaa"><p>page6</p></li>
<li style="background:#ccc"><p>page7</p></li>
<li style="background:#000"><p>page8</p></li>
</ol>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(".nav ul li").click(function(){
var index=$(this).index();
var i=150+index*501+'px'
$("html,body").animate({scrollTop:i},500)
})
$(window).scroll(function(){
if($(window).scrollTop()>150){
$(".nav").css({"position":"fixed","top":"0px"})
}
else{
$(".nav").css({"position":"absolute","top":"150px"})
}
for(var x=0;x<8;x++){
var i=150+x*500
if($(window).scrollTop()>i && $(window).scrollTop()<i+500){
$(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
别踩白块是一款简单易上手的数字小游戏,下面这篇文章主要给大家介绍了关于使用jquery实现别踩白块小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。2015-07-07
这篇文章主要介绍了jQuery+css实现的换页标签栏效果,涉及jQuery动态操作页面元素构造换页标签的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jquery实现的淡入淡出下拉菜单效果,涉及jquery操作页面属性的动态添加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这是一个加了点淡入淡出效果的顶部tooltip控件，会自动消失,小功能大家参考使用吧2013-12-12
内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，接下来为大家详细介绍下jQuery选择器，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要介绍了jquery禁止输入数字以外的字符的示例(纯数字验证码),需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery Form表单取值的方法，之前js取form表单的值都是一个一个的取，数量一多之后容易出错而且烦透了。具体jq form表单取值方法，大家通过本文学习下吧2017-01-01
我们看到很多网站会有有错误404页面，当页面不存存时就会提示，然后过几秒就会自动跳到首页了，下面我来给大家举一个404错误页面跳到首页实例，有需要的朋友可以参考一下2013-08-08
在前一篇介绍 jQuery Ajax 的数据加载中的例子都是从静态的文件中取得数据，而 Ajax 更大的价值在于与后端服务器进行数据传递，动态地请求和发送数据。2014-06-06
最新评论