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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 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
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php封装的验证码类分享
2017/02/26 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python 远程开关机的方法
2020/11/18 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
毕业生怎样写好自荐信
2013/11/11 职场文书
美容院营销方案
2014/03/05 职场文书
天网工程实施方案
2014/03/26 职场文书
1000字打架检讨书
2014/11/03 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
六五普法心得体会2016
2016/01/21 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android