【jQuery】用jQuery实现定位滚动导航效果
来源:互联网 发布:在淘宝购买网店 编辑:程序博客网 时间:2024/06/05 15:57
在平时写官网代码的过程中,我们经常可以碰到这样的一个情况:在顶部有一个总的导航,然后接下来会有一个banner,在banner的下面会有一个二级导航,二级导航的每个页面都有一定的内容,为了显示更友好,此时我们会在滚动的时候,让二级导航固定在顶部,然后会根据滚动的位置,将导航条的内容相应的改变,那么用jQuery如何实现这个效果呢?
我写了一个简单的页面来完成这个效果,现在先来看看效果。
接下来附上代码:
html:
<!--banner--><div class="pre_banner"> <a href="##"> <img src="images/banner.png"> </a></div><div class="empty-placeholder hidden"></div><!--导航,这里一般是二级导航--><div id="subNav"> <ul class="wrap"> <li class="adv_active"><a href="#person_intro" class="adv_active adv_intro">个人简介</a></li> <li><a href="#honer" class="adv_honer">荣誉奖励</a></li> <li><a href="#academic" class="adv_academic">学术成果</a></li> <li><a href="#education" class="adv_education">教育经历</a></li> <li><a href="#files" class="adv_files">附件</a></li> </ul></div><div id="person_intro">个人简介</div><div id="honer">荣誉奖励</div><div id="academic">学术成果</div><div id="education">教育经历</div><div id="files">附件</div>css:
body{ background-color: #f7f7f7; width: 100%; margin:0; padding:0;}ul,li{ list-style: none; padding:0; margin:0;}li{ float: left;}a{ text-decoration: none;}.pre_banner img{ width:100%;}.empty-placeholder{ height:120px;}.hidden{ position: fixed; top:0; left:0; z-index: 1000;}#subNav{ width: 100%; background-color: #f7f7f7; height:48px; padding:20px 0;}#subNav ul{ height:48px; width:1200px; margin:0 auto; background-color: #fff;}#subNav ul li{ width: 19.5%; border-left:1px solid #f7f7f7; height:48px; line-height: 48px; text-align: center;}#subNav ul li a{ color:#000; font-size: 16px; height: 48px; width: 100%; display: block;}#subNav .adv_active{ background-color: #97c740; color:#fff;}#person_intro,#honer,#academic,#education,#files{ height:400px; width:1200px; margin:0 auto; text-align: center; font-size: 20px; line-height:400px;}#person_intro{ background-color: #71ff53;}#honer{ background-color: #ffa7e8;}#academic{ background-color: #529fff;}#education{ background-color: #fbff95;}#files{ background-color: #bfa8ff; height:800px; line-height:800px;}.fixedSubNav{ position: fixed; top:0; left:0; z-index:1000;}js:
<script> $(function () { console.log($($('#person_intro')).offset().top - 70); console.log($($('#honer')).offset().top - 70); console.log($($('#academic')).offset().top - 70); console.log($($('#education')).offset().top - 70); console.log($($('#files')).offset().top - 70); var subNav_active = $(".adv_active"); var subNav_scroll = function(target){ subNav_active.removeClass("adv_active"); target.parent().addClass('adv_active'); subNav_active = target.parent(); }; <!--导航点击事件--> $("#subNav a").click = function () { subNav_scroll($(this)); var target = $(this).attr("href"); var targetScroll = $(target).offset().top - 70; $("html,body").animate({scrollTop:targetScroll},300); }; //页面跳转时定位 if(window.location.hash){ var targetScroll = $(window.location.hash).offset().top - 70; $("html,body").animate({scrollTop:targetScroll},300) } //页面滚动时定位 $(window).scroll(function() { var targetTop = $(this).scrollTop(); if (targetTop >= 296) { $("#subNav").addClass("fixedSubNav"); $(".empty-placeholder").removeClass("hidden"); } else { $("#subNav").removeClass("fixedSubNav"); $(".empty-placeholder").addClass("hidden"); } if (targetTop < 696) { subNav_scroll($(".adv_intro")); } else if (targetTop > 706 && targetTop < 1106) { subNav_scroll($(".adv_honer")); } else if (targetTop > 1106 && targetTop < 1506) { subNav_scroll($(".adv_academic")); } else if (targetTop > 1506 && targetTop < 1906) { subNav_scroll($(".adv_education")); } else if (targetTop > 1906) { subNav_scroll($(".adv_files")); } }); }());</script>
原理说明:
这个实现的原理其实就是利用scrollTop()方法,通过这个可以方法我们可以获取当滚动条滚动的时候隐藏起来的那个高度,然后将页面定位到当前就可以。
知识点补充:
1、window.location.hash 使用说明
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。 建议可以参考:window.location.hash 使用说明
2、scrollTop()
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
延伸:
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX :相对文档的水平座标
event.clientY: 相对文档的垂直座标
event.offsetX :相对容器的水平坐标
event.offsetY :相对容器的垂直坐标
3、animate()
animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
- 【jQuery】用jQuery实现定位滚动导航效果
- jQuery实现固定顶部 定位滚动导航效果代码
- jquery实现定位导航效果
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- jQuery滚动顶部定位导航
- jQuery实现滚动效果
- Jquery 滚动效果实现
- jquery实现网页定位导航
- Jquery单页全屏滚动效果 导航
- jquery左侧导航滑动网页定位效果
- jquery实现单行滚动效果
- jquery实现回旋滚动效果
- jquery实现图片滚动效果
- 【jquery】jquery实现回旋滚动效果
- JavaScript和jQuery实现定位导航功能
- 使用jQuery实现网页定位导航
- springboot+spring+spring+mybatis+ajxa(ssmaboot)
- java的IO之包装流和缓存流
- hdu5118,图上的推导计算
- JavaWeb学习总结(四)——Http协议
- Java中的final关键字详解
- 【jQuery】用jQuery实现定位滚动导航效果
- Linux环境 wkhtmltopdf安装过程及排错 安装过程
- CF round 419 (div2)C题
- 解析BeanDefinition之解析子元素meta.
- unity的UGUI的一些优化方法
- FastDFS与Nginx的搭建及遇到的问题
- 树莓派(raspberry pi)学习4: 更改键盘布局
- 字符串A中出现B时就用C来代替
- [Unity]适合独立开发者的几款画图软件