滑动页面时 消息动态fixed的html,滚动页面时DIV到顶部时fixed(原生js实现)

本文介绍了一种使用JavaScript和jQuery实现的菜单固定效果。当页面滚动到特定位置时,菜单会固定在屏幕顶部。通过简单的HTML结构和CSS样式,结合JavaScript监听滚动事件的方法,实现了这一效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

菜单滚动至顶部后固定-柯乐义

.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}

.header{height:150px;}

#nav_keleyi_com{padding:10px;position:relative;top:0;background:#125430;width:1000px;}

a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}

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';

}

}

window.onload = function(){

menuFixed('nav_keleyi_com');

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值