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插件之validation插件
Mar 29 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现消息弹出框效果
Dec 10 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/07/17 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python实现udp传输图片功能
2020/03/20 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
感恩教师节演讲稿
2014/09/03 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
被告代理词范文
2015/05/25 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android