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实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现简单轮播图效果
Dec 27 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中显示数组与对象的实现代码
2011/04/18 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python递归函数绘制分形树的方法
2018/06/22 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python urllib.request对象案例解析
2020/05/11 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
如何写一个自定义标签
2012/12/28 面试题
英语专业学生个人求职信
2014/01/28 职场文书
上海世博会口号
2014/06/19 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS