JS实现点击导航栏之后页面滚动
来源:互联网 发布:mac美国官网海淘攻略 编辑:程序博客网 时间:2024/05/18 01:07
原文地址:http://blog.csdn.net/luoshengmenwh/article/details/52830687
侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果。
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JS 控制页面上下滚动及右侧浮动导航效果</title><style type="text/css">*{margin:0;padding:0;}.header{width:1000px;margin:0 auto;height:400px;background:#ccc;font-size:40px;text-align:center;line-height:400px;color:#00FFFF;}.content{width:1000px;margin:0 auto;}.cont{height:500px;}.cont1{background:#666666;}.cont2{background:#999999;}.cont3{background:#CCCCCC;}.cont4{background:#FF0000;}.cont5{background:#6699CC;}.cont h4{font-size:16px;}.pop1{position:absolute;top:400px;right:50px;width:100px;height:240px;border:1px #00FFFF solid;}.pop1 .r_nav{list-style:none;}.pop1 .r_nav li{width:100px;}.pop1 .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}.pop1 .r_nav li a:hover,.pop1 .r_nav li a.cur{background:#6699CC;color:#00FFCC;}.pop1 .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}.pop1 .tt a:hover{background:#6699cc;color:#00ffcc;}.pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:-380px;right:50px;}.pop .r_nav{list-style:none;}.pop .r_nav li{width:100px;}.pop .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}.pop .r_nav li a:hover,.pop .r_nav li a.cur{background:#6699CC;color:#00FFCC;}.pop .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}.pop .tt a:hover{background:#6699cc;color:#00ffcc;}</style></head><body id="top"><div class="header">头部!</div><div class="content"><div class="cont1 cont"><h4>周一</h4></div><!--cont1--><div class="cont2 cont"><h4>周二</h4></div><!--cont2--><div class="cont3 cont"><h4>周三</h4></div><!--cont3--><div class="cont4 cont"><h4>周四</h4></div><!--cont4--><div class="cont5 cont"><h4>周五</h4></div><!--cont5--></div><!--content--><div id="popup" class="pop1"><ul class="r_nav"><li class="lis"><a class="cur" href="javascript:;" title="">星期一</a></li><li class="lis"><a href="javascript:;" title="">星期二</a></li><li class="lis"><a href="javascript:;" title="">星期三</a></li><li class="lis"><a href="javascript:;" title="">星期四</a></li><li class="lis"><a href="javascript:;" title="">星期五</a></li></ul><!--.r_nav--><div class="tt"><a class="toTop" href="javascript:;" title="">Top</a></div></div><!--#popup--><script src="js/jquery1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){var nav=(function(navObj){navObj.init=function(){this.n=0;this.offsetTop=[];this.scrolltype=true;this.review=function(){$('#popup .lis a').eq(this.n).addClass('cur').parent().siblings().children().removeClass('cur');};for(var i=0;i<$('.content .cont').length;i++){this.offsetTop.push($('.content .cont').eq(i).offset().top);};navObj.bindE();};navObj.bindE=function(){//滚动条滚动改变导航元素效果var self=this;//这里的this等同于上面的this$(window).bind('load scroll',function(){var stval=$(this).scrollTop();if(stval>399){//判断滚动条滚动距离大于或小于header高度时,让导航效果对应在第一个上if(stval<self.offsetTop[0]){//alert(self.offsetTop[0]);self.n=0;}else{for(var j=0;j<self.offsetTop.length;j++){if(stval>(self.offsetTop[j]+300)&& stval<self.offsetTop[j+1]){self.n=j+1;break;}//这里的300是常量};};if(self.scrolltype===true){self.review();}$('#popup').removeClass('pop1').addClass('pop');}else{$('#popup').removeClass('pop').addClass('pop1');$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');};});$('.toTop').click(function(){// 点击返回首页Top按钮实现页面不刷新返回顶部$('html, body').animate({scrollTop:0+'px'},500);$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');});$('#popup .lis').delegate('a','click',function(e){// 点击导航定位页面内容self.n=$(this).index('#popup .lis a');self.scrolltype=false;self.review();var t=self.offsetTop[self.n];$('html,body').animate({scrollTop:t},500,function(){// 滚动条滚动 页面不同内容的offsetTop值实现按钮对应效果self.scrolltype=true;$(self.n).addClass('cur').parent().siblings().children().removeClass('cur'); }); });};return navObj;})(window.navObj || {});nav.init();});</script></body></html>
下面的效果感觉更好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.7.1.min.js"></script> <style> body{ margin:0; padding:0;} .main{ width:100%; height:auto;} .main div{ width:100%;} #float01{ height:930px; background:#004} #float02{ height:900px; background:#00f} #float03{ height:980px; background:#0ff} #float04{ height:930px; background:#0ad} #float05{ height:960px; background:#0d0} #float06{ height:970px; background:#0f0} #float07{ height:900px; background:#dd4} div.floatCtro{ width:60px; height:350px; position: fixed; left:25px; top:10%; z-index:100} div.floatCtro p{width:60px; text-align:center; height:40px; line-height:40px; font-family:'微软雅黑'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;} div.floatCtro a{ display:inline-block; display:none; width:60px; height:60px; margin:10px 0 0 0; background:#fff; color:#000; vertical-align:middle; cursor:pointer;} div.floatCtro a span{ display:block; width:28px; height:44px; line-height:22px; font-family:'微软雅黑'; font-size:14px; line-height:22px; text-align:center; margin:8px 16px; _margin:-10px 0 0 16px;} div.floatCtro a:hover{ background:#000; color:#fff; zoom:1;} div.floatCtro p:hover{ background:#c40000; color:#fff;} div.floatCtro p.cur{ background:#c40000; color:#fff;} </style> <script> $(function(){ var AllHet = $(window).height(); var mainHet= $('.floatCtro').height(); var fixedTop = (AllHet - mainHet)/2 // $('div.floatCtro').css({top:fixedTop+'px'}); $('div.floatCtro p').click(function(){ var ind = $('div.floatCtro p').index(this)+1; var topVal = $('#float0'+ind).offset().top; $('body,html').animate({scrollTop:topVal},1000) }) $('div.floatCtro a').click(function(){ $('body,html').animate({scrollTop:0},1000) }) $(window).scroll(scrolls) scrolls() function scrolls(){ var f1,f2,f3,f4,f5,f6,f7,bck; var fixRight = $('div.floatCtro p'); var blackTop = $('div.floatCtro a') var sTop = $(window).scrollTop(); fl = $('#float01').offset().top; f2 = $('#float02').offset().top; f3 = $('#float03').offset().top; f4 = $('#float04').offset().top; f5 = $('#float05').offset().top; f6 = $('#float06').offset().top; f7 = $('#float07').offset().top; if(sTop<=f2-100){ blackTop.fadeOut(300).css('display','none') } else{ blackTop.fadeIn(300).css('display','block') } if(sTop>=fl){ fixRight.eq(0).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f2-100){ fixRight.eq(1).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f3-100){ fixRight.eq(2).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f4-100){ fixRight.eq(3).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f5-100){ fixRight.eq(4).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f6-100){ fixRight.eq(5).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f7-100){ fixRight.eq(6).addClass('cur').siblings().removeClass('cur'); } } }) </script> <title>test</title> </head> <body> <div class="main"> <div id="float01" class="cur"></div> <div id="float02"></div> <div id="float03"></div> <div id="float04"></div> <div id="float05"></div> <div id="float06"></div> <div id="float07"></div> <div id="float08"></div> <div id="float09"></div> <div class="floatCtro"> <p>导航一</p> <p>导航二</p> <p>导航三</p> <p>导航四</p> <p>导航五</p> <p>导航六</p> <p>导航七</p> <a> <font style="width:60px; height:1px; display:block"></font> <span>返回顶部</span> </a> </div> </div> </body> </html>
阅读全文
0 0
- js实现点击导航栏之后页面滚动
- JS实现点击导航栏之后页面滚动
- 原生js实现导航栏点击之后添加样式
- 滑动导航栏+滚动页面
- js实现超过页面一屏后,点击图标滚动到页面顶部top
- 点击导航缓动至滚动条对应位置,滚动页面时设置对应导航的选择状态
- 点击按钮之后右侧弹出导航,再点击右侧导航隐藏回去的实现
- js实现图片的点击滚动效果
- 静态页面 用js实现导航栏变换背景
- 点击导航滚动条滚动到相应位置jQuery与js方法
- JS实现导航栏
- HTML+JS之点击按钮滚动到页面指定位置
- js,html 监听页面滚动高度 点击返回顶部
- 源生实现滚动页面显示悬浮导航
- velocity.js实现页面滚动切换效果
- js 实现弹框后页面不滚动
- JS 实现鼠标滚动页面跳转
- JS实现页面数值滚动显示
- 32位与64位Linux系统下各类型长度对比
- JVM调优总结(七)-典型配置举例1
- 技术文章 |【AI系统首次实现真正自主编程】利用遗传算法_完爆初级程序员
- tomcat 设置jdk环境变量
- 小白也能够熟练掌握常用的数据库使用技巧
- JS实现点击导航栏之后页面滚动
- 八、索引
- Using Markov Chains for Android Malware Detection
- 设计模式系列(四)装饰者模式
- 分页
- ◆练习题目◆◇区间动态规划◇ Brackets Sequence
- 陶陶摘苹果
- 九、MongoDB中explain()
- oracle分析函数