jQuery实现页面滚动时元素智能定位

资料来源：网络整理时间：2023/2/14 0:15:52 共计：3579 浏览

我们玩网页微博时，消息提示框一直会出现在页面右上方，即使下拉滚动条它都会浮动定位在右上方，直到你关闭小时提示框。类似的效果在淘宝商品详情页面上也有，当我们下拉滚动页面时，用来导航切换的“宝贝详情”、“交易详情”等一排按钮会一直出现在浏览器顶部，方便我们切换导航。

本文将以淘宝网商品详情的简易导航为例，和大家一起分享通过jQuery和CSS实现页面元素（要浮动的层）智能定位的效果。

实现过程

Js侦听滚动事件，当页面滚动的距离（页面滚动的高度）超出了对象（要滚动的层）距离页面顶部的高度，即要滚动的层到达了浏览器窗口上边缘时，立即将对象定位属性position值改成fixed（固定）。同时为了有个好点的体验效果，可以将对象的样式设置阴影效果以便更好的区分浮动层与页面内容主体。

这里需要注意的是，老前辈IE6不支持fixed，那就只能使用absolute来代替，但是这样会有一个问题，将会导致在IE6下看不到平滑效果。我们可以通过window.XMLHttpRequest来判断是否为IE6，因为除IE6及更低版本IE浏览器外，其他现代浏览器都支持 window.XMLHttpRequest。还有就是本例中我们用css3来制造阴影效果，为了兼容IE6-IE8，你也可以使用图片来设置阴影效果。

HTML

我们仿淘宝网的商品详情页面，建立一个简易的导航条。

<div id="nav"> 
    <ul> 
        <li><a href="#">宝贝详情</a></li> 
        <li class="cur"><a href="#">评价详情（123）</a></li> 
        <li><a href="#">成交记录（68件）</a></li> 
    </ul>  </div>

为了达到滚动效果，我们应该在页面中放置一些其他的元素或者设置body的高度，将页面高度撑起来。

CSS

我们运用css3，将导航条包装的稍显正规点，当然你也可以发挥你的美工特长，让它不那么土。注意我们使用了阴影效果的样式.shadow，用来动态的将效果赋给浮动的对象。

#nav{width:720px; height:42px; position:absolute; margin-left:20px; border:1px solid #d3d3d3;   background:#f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }  #nav li{float:left; height:42px; line-height:42px; padding:0 10px; border-right:  1px solid #d3d3d3; font-size:14px; font-weight:bold}  #nav li.cur{background:#f1f1f1; border-top:1px solid #f60}  #nav li a{text-decoration:none;}  #nav li.cur a{color:#333}  #nav li a:hover{color:#f30}  .shadow{-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px  
rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}

jQuery

本例中依赖jQuery库，所以必须先引入jQuery库文件。接着，我们按实现流程完成智能定位效果，请看代码及注释。

$.fn.smartFloat = function() { 
    var position = function(element) { 
        var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离 
        var pos = element.css("position"); //当前元素距离页面document顶部的距离 
        $(window).scroll(function() { //侦听滚动时 
            var scrolls = $(this).scrollTop(); 
            if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度 
                if (window.XMLHttpRequest) { //如果不是ie6 
                    element.css({ //设置css 
                        position: "fixed", //固定定位,即不再跟随滚动 
                        top: 0 //距离页面顶部为0 
                    }).addClass("shadow"); //加上阴影样式.shadow 
                } else { //如果是ie6 
                    element.css({ 
                        top: scrolls  //与页面顶部距离 
                    });     
                } 
            }else { 
                element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式 
                    position: pos, 
                    top: top 
                }).removeClass("shadow");//移除阴影样式.shadow 
            } 
        }); 
    }; 
    return $(this).each(function() { 
        position($(this));                          
    });  };

最后，我们调用以上效果：

$(function(){ 
    $("#nav").smartFloat();  });

大功告成，去看下效果吧： demo.

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：扫描二维码自动识别手机APP下载地址 | ·下一条：一款基于jQuery的颜色拾取器