jquery的固定定位效果

浏览数：20 / 时间：2015年06月09日

今天做了个固定定位的效果。比如对导航需要进行固定定位效果：

当没有滚动到导航下面，导航正常显示。

当滚动到导航下面，导航就固定到顶部。

这个效果使用了jquery的方法实现，具体思路为：

1)首先获取导航相对与文档的偏移量top（使用offset().top）

2)定义滚动事件，获取滚动元素的scrollTop，对scrollTop及top进行比较

3)若scrollTop超过了top，则对导航进行position:fixed设置，若没有超过，则对导航设置默认的position:static.

另外针对跳转到固定位置，很多处理是通过锚点实现，location.href=#id或者location.hash=#id这种形式实现。其实也可以利用jquery的offset().top来达到同样的效果，具体可以看下面代码中针对固定定位元素的click事件的处理。

这里写了个demo：

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>jquery固定定位demo</title>
<style type="text/css">
    body{margin:0;padding-top:100px;background-color:#fff;}
    .content{width:500px;height:300px;background-color:#ccc;}
    h2{padding:10px;background-color:#000;color:#fff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <div class="floor">
        <h2 class="fixed">第一楼</h2>
        <div class="content">ddddd</div>
    </div>
    <div class="floor">
        <h2>第二楼</h2>
        <div class="content">ffff</div>
    </div>
    <div class="floor">
        <h2>第三楼</h2>
        <div class="content">sdfsf</div>
    </div>
    <div class="floor">
        <h2>第四楼</h2>
        <div class="content">aaaaaa</div>
    </div>
    <script type="text/javascript">
        var fixed = $(".fixed");
        var position = fixed.css("position");
        var offsetTop = fixed.offset().top;
        //定义滚动事件，判断scrollTop及offsetTop
        $(window).scroll(function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > offsetTop){
                fixed.css({"position":"fixed","width":"100%","top":"0"});
            }else{
                fixed.removeAttr("style").css({"position":position,"width":"100%"});

            }
        });
        //点击固定元素，回到最初的位置
        fixed.bind("click",function(){
            if($(this).css("position") == "fixed"){
                $(this).removeAttr("style").css({"position":"static","width":"100%"});
                $(document).scrollTop(offsetTop);
            }

        });

    </script>
</body>

</html>

---------------------------------------分割线----------------------------------------------------------

对clientWidth,offsetWidth,offsetTop,jquery的offset().top的解释，因为本人对它们一直有点疑问：

clientWidth:元素的宽度，不包括border和scrollBar的宽度

offsetWidth:元素的宽度+ border+scrollBar的宽度

offsetTop:元素距离最近的一个设置了position不为static的父级元素的距离

jquery中的offset().top:元素距离文档的距离。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery的固定定位效果