jquery页面滚动显示浮动菜单栏锚点定位效果
<!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页面滚动显示浮动菜单栏锚点定位效果的更多相关文章
- jQuery页面滚动右侧浮动导航切换
体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...
- Jquery实现滚动显示欢迎字幕效果
Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...
- Jquery控制滚动显示欢迎字幕v2
Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- scrollReveal.js – 页面滚动显示动画JS
简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 ...
- jquery页面滚动到指定id
//jquery页面滚动到指定id $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- jquery 上下滚动显示隐藏
function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...
随机推荐
- 电影大全 API接口
http://www.apix.cn/services/show/29 http://www.apix.cn/services/show/112
- PDF文件的加载及展示
项目需要显示PDF文件,于是遍寻了网络,发现的方法以下几种: 1.使用UIWebView加载,没啥说的,根据文件路径,网络或者本地皆可,创建一个NSURLRequest,然后用webView加载就可以 ...
- 一款基于jQuery的带文字标题上下切换焦点图
今天给大家分享一款很实用的jQuery焦点图插件,它的最大特点就是使用非常方便,而且实现相对比较简单.焦点图的图片下方悬浮文字链接,鼠标滑过文字时即可切换至相应的图片,在图片切换的过程中出现淡入淡出的 ...
- lua工具库penlight--07函数编程(二)
列表压缩 列表压缩是以紧凑的方式通过指定的元素创建表.在 Python里,你可以说: ls = [x for x in range(5)] # == [0,1,2,3,4] 在 Lua,使用pl.c ...
- Netty4.x中文教程系列(七)UDP协议
将近快一年时间没有更新Netty的博客.一方面原因是因为项目进度的问题.另外一方面是博主有一段时间去熟悉Unity3D引擎. 本章节主要记录博主自己Netty的UDP协议使用. 1. 构建UDP服务端 ...
- Tomcat Ajax跨域访问
http://ibleave60.blog.51cto.com/2669415/1208652 http://enable-cors.org/server.html 下载cors-filter-1.7 ...
- Spider Studio 界面功能布局
SS是Spider Studio (采集工作站) 的简称, 这是由GDT团队开发的一款互联网数据采集开发工具. 它以浏览器为基础, 运用JQuery技术, 结合脚本化C#的强大功能, 能够轻松解决各类 ...
- 将php和mysql命令加入到环境变量中
方法一:直接运行命令export PATH=$PATH:/usr/local/webserver/php/bin 和 export PATH=$PATH:/usr/local/webserver/my ...
- php 返回上一页并刷新
echo "<script>alert('分组已存在!');location.href='".$_SERVER["HTTP_REFERER"].&q ...
- 匿名内部类 Inner class
先说结论 匿名内部类分两种,一种是接口的匿名实现,一种是类的匿名子类!后者往往用于修改特定方法. 再说起因 本来以为匿名内部类很简单,就是接口的匿名实现,直到我发现了下面这段代码: public cl ...