javascript改变position值实现菜单滚动至顶部后固定

现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码：


代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
.header{height:150px;}
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav">
<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
<a href="#">55555</a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="menuFixed.js"></script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
</script>

menuFixed.js 代码：


代码如下:

function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

最后需要说明的是，该效果在 ie6 下不支持，因为 ie6 不支持 position:fixed;
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。

赞 (0)

相关推荐

  • JS中定位 position 的使用实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{width:200px;} </style> </head> <body> <div id=&q

  • 通过JS 获取Mouse Position(鼠标坐标)的代码

    昨天写的脚本在获取鼠标位置的时候有些问题.在IE中始终当有滚动条的时候,发现document.body.scrollTop并没有起到作用.后来在google中搜索到一篇文章Mouse Cursor Position,详细介绍了浏览器鼠标定位的问题.各个浏览器对鼠标定位的标准不一样,就连不通版本的ie对定位支持都不一样.document.body.scrollLeft,document.body.scrollTop只用于IE6以前的版本,在IE6中,对没有宣告 DOCTYPE,或者宣告的是tran

  • javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们.在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器). 1.DOMElement.contains(DOMNode) 这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中. 当尝试优化 CSS 选择器遍历(像:"#id1 #id2"),这个方法很有用.你可以通过 getElementById 得到元素,然后使用 .contains() 确定 #id1

  • javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离窗口底部60px) 复制代码 代码如下: .floating_9677{position:fixed; z-index:961; bottom:60px;} ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将posi

  • js完美解决IE6不支持position:fixed的bug

    先来看段代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #

  • IE6中使用position导致页面变形的解决方案(js代码)

    IE6中使用position导致页面变形的解决方案(js代码)

    如图所示: 解决方案: 1.缩放窗体时先得到内容左边的空白宽度. $("#nav").offset().left; 得到内容区左边的空白宽度. 2.得到整个窗体的宽度(注意:桌面分辨率为基准,少了加上来). 3.用桌面分辨率的宽度-页面内容区的宽度/2,就可以得到一边多余的宽度. 4.如果得到的值跟$("#nav").offset().left;得到值不同,则可以调到两值相同. 复制代码 代码如下: var ietest=function() { if ($.bro

  • javascript改变position值实现菜单滚动至顶部后固定

    现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部.其实就是改变 position 的值. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" t

  • 微信小程序--特定区域滚动到顶部时固定的方法

    微信小程序--特定区域滚动到顶部时固定的方法

    项目要求: 如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样. 以下是代码展示: 1.wxml <scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun"> <view class="{{top>130 ? 'topnav' : ''}}"> <

  • javascript单张多张图无缝滚动实例代码

    我们会看到很多的网站上会使用多张图片无缝滚动的效果. 下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动. 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{po

  • 分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

    分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

    先給大家看看效果: 效果介紹: 鼠标滑过进度条改变进度值.兼容性: 可完美兼容IE6,IE7,IE8,Chrome,Firefox代码: 复制代码 代码如下: <script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> <style type=

  • jQuery实现Tab菜单滚动切换的方法

    jQuery实现Tab菜单滚动切换的方法

    本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • javascript全局自定义鼠标右键菜单

    javascript全局自定义鼠标右键菜单

    本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下 前言 html全局自定义鼠标右键菜单 一.效果展示 二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #TextBox{ width: 2

  • javascript实现多张图片左右无缝滚动效果

    javascript实现多张图片左右无缝滚动效果

    结构:box包含ul,ul包含4个li:ul绝对定位. 复制li-1.li-2到第li-4后面,为了区分于li-1.li-2,内容改为li-5.li-6,颜色不变.此时ul包含6个li. 需要注意的是,移动的是ul这个大盒子而不是li. 原理:当ul 绝对定位的left 值等于(li-1+li-2+li-3+li-4)的宽度时,利用JavaScript快速复原left 值为0 . 此时请注意盒子里面数字和颜色的变化! 效果图: 示例代码: <!DOCTYPE html> <html la

  • 使用Javascript实现选择下拉菜单互移并排序

    使用Javascript实现选择下拉菜单互移并排序

    本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码. 代码如下: <html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <

  • Javascript实现的简单右键菜单类

    Javascript实现的简单右键菜单类

    本文实例讲述了Javascript实现的简单右键菜单类.分享给大家供大家参考.具体如下: 这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class. 运行效果截图如下: 在线演示地址如下: http://demo.j

  • vue2.0 子组件改变props值,并向父组件传值的方法

    为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop

随机推荐