JS 自动固定顶部的悬浮菜单栏代码

最新推荐文章于 2022-08-23 17:24:49 发布

dingshikan0537

最新推荐文章于 2022-08-23 17:24:49 发布

阅读量320

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/weixing/archive/2013/04/12/3016637.html

版权

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自动固定顶部的悬浮菜单栏代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;left:50%;width:900px;margin-left:-450px;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅，随着页面滚动而浮动</div>    
<ul id="content">
    <li class="item">第一块内容</li>
    <li class="item">第二块内容</li>
    <li class="item">第三块内容</li>
    <li class="item">第四块内容</li>
    <li class="item">第五块内容</li>
    <li class="item">第六块内容</li>
    <li class="item">第七块内容</li>
    <li class="item">第八块内容</li>
    <li class="item">第九块内容</li>
    <li class="item">第十块内容</li>
</ul>
<script language="javascript">
var speed = 100;
var scrollTop = null;
var hold = 0;
var float_banner;
var pos = null;
var timer = null;
var moveHeight = null;
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_ad;
function scroll_ad(){
    scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
    pos = scrollTop - float_banner.offsetTop;
    pos = pos/10
    moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
    if(moveHeight!=0){
        float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
        setTimeout(scroll_ad,speed);
    }
//alert(scrollTop);
}
</script>
</body>
</html>

eg2:

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>顶部固定菜单</title>
 <style type="text/css">
 *{ margin:0; padding:0;}
 .nav-wrapper-fixed{ position:fixed; top:0; width:100%;}
 .nav-wrapper-fixed .nav{width:960px; margin:0 auto;}
 .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
 .nav-wrapper{ margin-top:100px; width:100%;}
 .nav-wrapper .nav{width:960px; margin:0 auto;}
 .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
 </style>
 <script type="text/javascript">
     window.onload = function () {
         var nav = document.getElementById('nav');
         var navFixed = document.getElementById('navFixed');
         window.onscroll = function () {
             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
             document.title = scrollTop
             if (scrollTop > nav.offsetTop) {
                 navFixed.style.display = 'block';
             } else if (scrollTop < nav.offsetTop) {
                 navFixed.style.display = 'none';
             }
         }
     };
 </script>
 </head>
 <body style="height:2000px;">
 <div class="nav-wrapper">
     <div class="nav" id="nav">
         <ul>
             <li>菜单一</li>
             <li>菜单二</li>
             <li>菜单三</li>
             <li>菜单四</li>
             <li>菜单五</li>
         </ul>
     </div>
 </div>
 <div class="nav-wrapper-fixed" id="navFixed" style="display:none;">
     <div class="nav" id="nav">
         <ul>
             <li>菜单一</li>
             <li>菜单二</li>
             <li>菜单三</li>
             <li>菜单四</li>
             <li>菜单五</li>
         </ul>
     </div>
 </div>
 </body>
 </html>

eg3:

View Code

  $(function () {
        var elm = $('#pordAttr');
        var startPos = $(elm).offset().top;
        $.event.add(window, "scroll", function () {
            var p = $(window).scrollTop();
            $(elm).css('position', ((p) > startPos) ? 'fixed' : 'static');
            $(elm).css('top', ((p) > startPos) ? '0px' : "");
        });
    });

获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。

转载于:https://www.cnblogs.com/weixing/archive/2013/04/12/3016637.html

dingshikan0537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 自动固定顶部的悬浮菜单栏代码

View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&...
复制链接

扫一扫