JS实现移动底部导航栏!

最新推荐文章于 2023-06-03 17:05:47 发布

wingwingdi

最新推荐文章于 2023-06-03 17:05:47 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ASP的学习经历文章标签： javascript css 浏览器 div 产品 ie

本文链接：https://blog.youkuaiyun.com/wingwingdi/article/details/3188041

ASP的学习经历专栏收录该内容

5 篇文章

订阅专栏

这篇博客通过CSS和JavaScript展示了如何实现一个固定在页面底部，且随着页面滚动位置动态调整的导航栏。CSS部分设置了#master div的样式，包括宽度、位置、背景色和透明度。JavaScript部分使用滚动事件监听器，根据页面滚动位置动态更新导航栏的top属性，确保其始终位于视口底部。

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

代码截取自太平洋网站的产品比较页面

<style type="text/css">
<!--
#master{ margin:0 auto;width:988px;position:absolute;left:center;top:780px;z-index:999;background:#ebd7a2;height:28px;filter:alpha(opacity=80); /* IE */    -moz-opacity:0.8; /* Moz FF */opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/}
#master table{ width:988px; text-align:center;}
-->
</style>

以上CSS定义了div #master

<script language="JavaScript">
var oldPosition = 0;
function flow() {
    var scrollPos;
    var cHeight;
    
    if (typeof window.pageYOffset != 'undefined') {
       scrollPos = window.pageYOffset;
       cHeight=document.documentElement.clientHeight;
    }
    else if (typeof document.compatMode != 'undefined' &
         document.compatMode != 'BackCompat') {
       scrollPos = document.documentElement.scrollTop;
       cHeight=document.documentElement.clientHeight;
    }
    else if (typeof document.body != 'undefined') {
       scrollPos = document.body.scrollTop;
       cHeight=document.body.clientHeight;
    }
    var a=scrollPos+cHeight-document.getElementById("master").offsetHeight;
    if(a!=oldPosition){
        document.getElementById("master").style.top = a+'px';
        oldPosition = a;
    }
}
window.setInterval("flow()",1);
</script>

<div id="master">
导航栏内容
</div>