JS/Jquery实现导航栏顶部吸顶效果（一）

最新推荐文章于 2021-07-01 10:42:51 发布

要做前端的一股清流

最新推荐文章于 2021-07-01 10:42:51 发布

阅读量4.9k

点赞数 2

分类专栏： web前端学习文章标签：吸顶标题栏 javascript 导航

web前端学习专栏收录该内容

22 篇文章 4 订阅

订阅专栏

一、JS原生实现顶部吸顶效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        #nav {
            width:100%;
            height:60px;
            background:#39f;
            color:#fff;
            line-height:60px;
            text-align:center;
            padding:0;
            margin:0;
            list-style:none;
        }
        #nav li {
            float:left;
            width:20%;
            height:60px;
        }
        .fix {
            position:fixed;
            top:0;
            left:0;
        }
    </style>
</head>

<div class="wrap">
    <h1>在线书城</h1>
    <p>有没有一本书让你仿佛遇到春风十里</p>
    <ul id="nav">
        <li>加入购物车</li>
        <li>加入收藏</li>
        <li>立即购买</li>
    </ul>
    <div class="con">
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
    </div>
</div>

<script type="text/javascript">
    var tit = document.getElementById("nav");
    //获取距离页面顶端的距离
    var titleTop = tit.offsetTop;
    //滚动事件
    document.onscroll = function(){
        //获取当前滚动的距离
        var btop = document.body.scrollTop||document.documentElement.scrollTop;
        // 也可以写成document.body.scrollTop＋document.documentElement.scrollTop;因为这两个属性在同一浏览器不会同时有效。
        //如果滚动距离大于导航条据顶部的距离
        if(btop>titleTop){
            //为导航条设置fix
            tit.className = "clearfix fix";
        }else{
            //移除fixed
            tit.className = "clearfix";
        }
    }
</script>
</html>

二、Jquery实现顶部吸顶效果

$(function(){
          var $sidebar=$("#slideBar");
          var offset=$sidebar.offset();
          $(window).scroll(function(){
              var scrollTop=$(window).scrollTop();
              if(offset.top<scrollTop){
                  $sidebar.attr('style','position:fixed');
              }else{
                  $sidebar.attr('style','position:relative');
              }
          });

三、

document.body.scrollTop用法

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
Post by molong on 2009-05-19 11:57 PM #1

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候，请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}

返回顶部

先判断document.documentElement.scrollTop和 document.body.scrollTop哪个的值不为空，当不为0时执行等于0的赋值操作即 document.body.scrollTop = 0或document.documentElement.scrollTop=0；提供中参考，希望对你有所帮助

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document .documentElement来取代document .body,可以这样写
例：

var top = document .documentElement.scrollTop || document .body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document .documentElement.scrollTop ? document .documentElement.scrollTop : document .body.scrollTop;
这么写可以得到很好的兼容性。
相反，如果不做声明的话，document .documentElement.scrollTop反而会显示为0。