Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

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

WBOY

Freigeben： 2016-05-16 17:43:18

Original

1133 Leute haben es durchsucht

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

复制代码代码如下:

11111
22222
33333
44444
55555

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 obj.style.position = 'relative'; 
}else{ 
obj.style.position = 'fixed'; 
} 
} 

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

Verwandte Etiketten：

固定滚动顶部

Quelle：php.cn

Vorheriger Artikel：JS键盘的键码(event.keyCode)图片版_基础知识 Nächster Artikel：js jquery验证*正则学习_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors