jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
5 <metahttp-equiv="X-UA-Compatible"content="IE=edge">
6 <title>jQuery页面滚动浮动导航切换代码 - xw素材网</title>
7 <linkrel="stylesheet"type="text/css"href="css/reset.css">
8 <linkrel="stylesheet"type="text/css"href="css/menu.css">
9 <scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>
10 <scripttype="text/javascript"src="js/menu.js"></script>
11 </head>
12 <body>
13 <divid="menu">
14     <ul>
15         <li><ahref="#item1"class="cur">One</a></li>
16         <li><ahref="#item2">Two</a></li>
17         <li><ahref="#item3">Three</a></li>
18         <li><ahref="#item4">Four</a></li>
19         <li><ahref="#item5">Fir</a></li>
20     </ul>
21 </div>
22 <divid="content">
23     <divclass="item"id="item1">
24         <h1>1F</h1>
25         <divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
26         <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
27         <p>来源：<ahref="http://www.xwcms.net/"target="_blank">xw素材网</a></p>
28         </div>
29     </div>
30     <divclass="item"id="item2">
31         <h1>2F</h1>
32     </div>
33     <divclass="item"id="item3">
34         <h1>3F</h1>
35     </div>
36     <divclass="item"id="item4">
37         <h1>4F</h1>
38     </div>
39     <divclass="item"id="item5">
40         <h1>5F</h1>
41     </div>
42 </div>
43 </body>
44 </html>

menu.js

1 $(document).ready(function(){2 $(window).scroll(function(){3 var top = $(document).scrollTop();          //定义变量，获取滚动条的高度4 var menu = $("#menu");                      //定义变量，抓取#menu5 var items = $("#content").find(".item");    //定义变量，查找.item6
7 var curId = "";                             //定义变量，当前所在的楼层item #id8
9 items.each(function(){10 var m = $(this);                        //定义变量，获取当前类11 var itemsTop = m.offset().top;        //定义变量，获取当前类的top偏移量12 if(top > itemsTop-100){13 curId = "#" + m.attr("id");14 }else{15 return false;16 }17 });18
19 //给相应的楼层设置cur,取消其他楼层的cur20 var curLink = menu.find(".cur");21 if( curId && curLink.attr("href") != curId ){22 curLink.removeClass("cur");23 menu.find( "[href=" + curId + "]" ).addClass("cur");24 }25 // console.log(top);26 });27 });

menu.css

1 #content{width:100%;height:auto;margin:0 auto;}
2 #content div{width:100%;height:868px;margin:0 auto;}
3 #content div#item1{background-color:#00ff00}
4 #content div#item2{background-color:#279756}
5 #content div#item3{background-color:#2ce3e5}
6 #content div#item4{background-color:#5e57e7}
7 #content div#item5{background-color:#ca61ae}
8 #content div h1{font-size:36px;color:#fff;}
9
10 #menu{width:88px;height:auto;position:fixed;top:50%;right:15px;margin-top:-135px;}
11 #menu ul{display:block;list-style:none}
12 #menu ul li a{width:88px;height:54px;line-height:54px;text-align:center;background-color:#fff;color:#32c96a;display:block}
13 #menu ul li a:hover,#menu ul li a.cur{background-color:#32c92a;color:#fff;}

reset.css

1 *[hidefocus]{outline:none;}
2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
3 fieldset,img,html,body,iframe{border:0;}
4 table{border-collapse:collapse;border-spacing:0;}
5 li{list-style:none;}
6 h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;}
7 caption,th{font-weight:normal;font-style:normal;text-align:left;}
8 em,strong{font-weight:bold;font-style:normal;}
9
10 body,textarea,select,input{font-family:helvetica,arial,simsun,sans-serif;font-size:14px;color:#000;}
11 body{background-color:#fff;}
12 a,button{cursor:pointer;}
13 a{text-decoration:none;color:#000;outline:none;}
14 a:hover{text-decoration:none;}
15 html,body{width:100%;height:100%;}
16 html{overflow:auto;overflow-y:scroll;}

jquery页面滚动显示浮动菜单栏锚点定位效果相关推荐

jQuery页面滚动右侧浮动导航切换
体验效果: http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head& ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
jQuery页面滚动动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...
jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
通过js滚轮滚动时调用动画_WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画 ...
用jquery实现平滑的页面滚动效果
用jquery实现平滑的页面滚动效果通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于 https://css-tricks.com/snippets/jquery/smoot ...

jquery页面滚动显示浮动菜单栏锚点定位效果

jquery页面滚动显示浮动菜单栏锚点定位效果相关推荐

最新文章

热门文章