青岛网站建设新闻资讯

利用JS实现DIV滚动至顶部后固定显示

时间:2023-03-27 已阅读:627次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

今天分享的建站知识是利用JS实现DIV滚动至顶部后固定显示,具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DIV滚动至顶部后固定</title>
</head>
<body style="height:2000px;">
<div style="height: 200px"></div>
<div id="nav_keleyi_com" style="position:relative;top:0;background:#00f;width:100px; height:100px">
Test Div
</div>
<script type="text/javascript">
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');
}
</script>
</body>



二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1389.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图