<!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <title>jQuery页面滚动浮动导航切换代码 - xw素材网</title>

 <link rel="stylesheet" type="text/css" href="css/reset.css">

 <link rel="stylesheet" type="text/css" href="css/menu.css">

 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

 <script type="text/javascript" src="js/menu.js"></script>

 </head>

 <body>

 <div id="menu">

     <ul>

         <li><a href="#item1" class="cur">One</a></li>

         <li><a href="#item2">Two</a></li>

         <li><a href="#item3">Three</a></li>

         <li><a href="#item4">Four</a></li>

         <li><a href="#item5">Fir</a></li>

     </ul>

 </div>

 <div id="content">

     <div class="item" id="item1">

         <h1>1F</h1>

         <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

         <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

         <p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>

         </div>

     </div>

     <div class="item" id="item2">

         <h1>2F</h1>

     </div>

     <div class="item" id="item3">

         <h1>3F</h1>

     </div>

     <div class="item" id="item4">

         <h1>4F</h1>

     </div>

     <div class="item" id="item5">

         <h1>5F</h1>

     </div>

 </div>

 </body>

 </html>

menu.js

 $(document).ready(function(){

     $(window).scroll(function(){

         var top = $(document).scrollTop();          //定义变量，获取滚动条的高度

         var menu = $("#menu");                      //定义变量，抓取#menu

         var items = $("#content").find(".item");    //定义变量，查找.item

         var curId = "";                             //定义变量，当前所在的楼层item #id 

         items.each(function(){

             var m = $(this);                        //定义变量，获取当前类

             var itemsTop = m.offset().top;        //定义变量，获取当前类的top偏移量

             if(top > itemsTop-100){

                 curId = "#" + m.attr("id");

             }else{

                 return false;

             }

         });

         //给相应的楼层设置cur,取消其他楼层的cur

         var curLink = menu.find(".cur");

         if( curId && curLink.attr("href") != curId ){

             curLink.removeClass("cur");

             menu.find( "[href=" + curId + "]" ).addClass("cur");

         }

         // console.log(top);

     });

 });

menu.css

 #content{width: 100%;height: auto; margin: 0 auto;}

 #content div{width: 100%; height: 868px; margin: 0 auto;}

 #content div#item1{background-color: #00ff00}

 #content div#item2{background-color: #279756}

 #content div#item3{background-color: #2ce3e5}

 #content div#item4{background-color: #5e57e7}

 #content div#item5{background-color: #ca61ae}

 #content div h1{font-size: 36px; color: #fff;}

 #menu{width: 88px;height: auto; position: fixed;top: 50%;right: 15px;margin-top: -135px;}

 #menu ul{display: block;list-style: none}

 #menu ul li a{width: 88px; height: 54px; line-height: 54px; text-align: center;background-color: #fff;color: #32c96a;display: block}

 #menu ul li a:hover,#menu ul li a.cur{background-color: #32c92a;color: #fff;}

reset.css

 *[hidefocus]{outline:none;}

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:;margin:;}

 fieldset,img,html,body,iframe{border:;}

 table{border-collapse:collapse;border-spacing:;}

 li{list-style:none;}

 h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;}

 caption,th{font-weight:normal;font-style:normal;text-align:left;}

 em,strong{font-weight:bold;font-style:normal;}

 body,textarea,select,input{font-family:helvetica,arial,simsun,sans-serif;font-size:14px;color:#000;}

 body{background-color:#fff;}

 a,button{cursor:pointer;}

 a{text-decoration:none;color:#000; outline: none;}

 a:hover{text-decoration:none;}

 html,body{width:100%;height:100%;}

 html{overflow:auto;overflow-y:scroll;}

jquery页面滚动显示浮动菜单栏锚点定位效果的更多相关文章

  1. jQuery页面滚动右侧浮动导航切换

    体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...

  2. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  3. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  4. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  5. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  6. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  7. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  8. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  9. jquery 上下滚动显示隐藏

      function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...

随机推荐

  1. linux（二十一）：apache服务配置（二）

    1.普通用户进入家文件夹 ​ ​紧接着之前的进度,我们想想博客的实现.每一个用户在登录之后.都是在自己的家文件夹.那么对于我们的要求就是要设置每一个用户的默认公布文件夹为其家文件夹. 接着我们就来实现 ...

  2. JMeter学习笔记（四）

    1. 断言 断言组件是通过获取服务器响应数据,然后根据断言规则去匹配这些响应数据:匹配到是正常现象,此时我们看不到任何提醒,如果匹配不到,即出现了异常情况,此时JMeter就会断定这个事务失败,那么我 ...

  3. dp之完全背包poj3181（高精度背包）

    这个题目要用到大数的加法,其他的,我没有感觉到有什么难想的......比较水的背包题,掠过..... #include<iostream> #include<stdio.h> ...

  4. java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明)

    转载地址:http://www.devba.com/index.php/archives/4581.html java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明); ...

  5. 网页打开新窗口——Window.open()详解

    转载自:http://blog.csdn.net/business122/article/details/8281142 Window.Open详解 一.window.open()支持环境:JavaS ...

  6. HTML中label的两种使用方法

    如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1: <label for=" ...

  7. 科技巨头们以 "A" 取名的时尚潮流

    科技巨头们以 "A" 取名的时尚潮流 from 公众号  WebHub  世界上有许多巨头公司喜欢以字母 a 打头作公司起名.改名,这主要是因为电话薄是以字母排序的(外国人习惯家里 ...

  8. Thinlphp 模版 foreach 嵌套在 另一个循环出现不能在次循环问题。

    把 foreach 循环改成 volist 就可以重置循环所以的数据.

  9. sql 更新字段

    UPDATE YpeopleSET power='0'WHERE power='1'; UPDATE Ypeople SET power='1' WHERE power='0' and pid='22 ...

  10. jenkins环境搭建&配置（二）

    Jenkins介绍: Jenkins用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境: 操作系统:linux(centOS) 软件:jdk ...