jquery实现企业定位式导航效果


Posted in jQuery onJanuary 01, 2018

本文实例为大家分享了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 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
You might like
NOT NULL 和NULL
2007/01/15 PHP
php基础学习之变量的使用
2011/06/09 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
浅谈Django的缓存机制
2018/08/23 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python 5个实用的技巧
2020/09/27 Python
基于python实现坦克大战游戏
2020/10/27 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
对孩子的寄语
2014/04/09 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
小学老师对学生的评语
2014/12/29 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript