使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
来源:互联网 发布:腾讯mac管家 编辑:程序博客网 时间:2024/05/16 12:51
如题。
《1》
我们经常会实现一种效果,这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部,有时候在侧边。实现的方法非常简单,只需要通过CSS进行元素的控制。
要点有:<1>position:fixed;<2>通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。
基本上对这两个css属性进行设置之后就可以实现上面的效果。
《2》
但是我们在实际操作过程中,如果使得某个元素一直固定在顶部,页面将会受到严重的影响。所以一般我们的做法是让页面滚动到某个合适的位置之后再让其固定住在某个位置或者出现。
本文只讲述顶部导航栏在页面滑动到其位置后固定在页面顶部的方法:
js代码:
<!--实现价格筛选栏在滑动到其位置之后紧贴顶部的js 陈烁斌 2013.12.12--> <script type="text/javascript"> //判断导航栏是否在原来位置上的标志,初始为false var test = false; $(window).scroll(function(){ //获取当前位置到窗口顶部的高度 var h_num=$(window).scrollTop(); if(h_num>980){//当当前高度大于导航条到窗口顶部高度 //切换导航条的类名为固定后的类名 $('.price-nav').addClass('fixer'); //当导航条的position变成了fixed后,原来的位置会变空,需要在原位置增加个占位div if(!test){ var stayPos = document.createElement("div"); stayPos.id= "stayPosDiv";stayPos.style.height = "38px";//导航条的高度 var temp = document.getElementById("nav"); temp.appendChild(stayPos); test=true; } }else{ //如果回到导航条原位置之前则替换回原来的类名 $('.price-nav').removeClass('fixer'); if(test){//移除占位div var temp = document.getElementById("nav"); temp.removeChild(stayPosDiv); test = false; } } });</script>通过这个js配合我们的css.就可以实现导航栏在页面滑动到一定的高度之后,固定在顶部的效果。
0 0
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 导航栏滚动到顶部时固定在顶部
- jQuery 顶部导航跟随滚动,固定浮动在顶部
- android view滑动到顶部并固定在顶部
- 如何让Html页面的导航固定在浏览器顶部
- 让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件 使用 单页导航
- jquery 滑动到顶部效果
- jquery 滑动返回到页面的顶部
- jQuery页面内滑动到锚点导航效果,回到顶部
- 将导航栏固定在窗口的顶部
- jQuery实现固定顶部 定位滚动导航效果代码
- FOOTER固定在页面的顶部
- [html][jQuery]表头固定在顶部的一种实现思路
- 用jquery实现小火箭到页面顶部的效果
- JQ:当页面滚动到一定位置之后,让元素固定在顶部,小于位置后恢复原来的位置
- 顶部滑动导航栏的实现
- 页面滚动到指定位置导航栏固定顶部
- 保存图片到sd卡之后在相册显示
- 使用springmvc提交put请求时提示 Request method 'POST' not supported
- java 内存流 利用内存流复制文件
- Hive的几种常见的数据导入方式
- 分布式事务学习(一)
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- Spring--IoC--基于XML的DI-异类抽象Bean
- redis 使用
- 利用JavaScript、Ajax及CSS3实现图片预加载
- Centos-6.5-Server图解安装
- c++作业4
- 开源的跨平台移动开发利器Xamarin Studio v6.3发布丨附下载
- @Configuration、@Bean
- 量化投资策略回测框架(一):胜率的估算