js页面滚动时层智能浮动定位实现:

 

案例展示：

第一个：每个人都有看过的淘宝页面：

 

案例就不多说了，有兴趣的可以多去找找，

这样的智能浮动效果还是不错的，挺方便。

 

基本的实现原理：

        首先有一个默认状态就是没有滚动的时候，什么事情也不用做，定位可以是absolute，也可以是stati，fixed，relartive 这些都可以。我们主要需要关注的是当浏览器滚动的时候，（要浮动的块）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，所以，后退一步，使用absolute属性代替，但是会有副作用——滚动不平滑。但，这也是没有办法的事情了。

现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢？当浮动层与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度其实是一致的，所以，用这个进行判断就OK了，但是，如何获得页面上元素距离页面的垂直距离呢？纯粹的js代码获得此值还是比较麻烦的，好在JavaScript库帮我们解决了这些工作。

 

jQuery下的层的智能浮动

方法代码如下：

$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });    
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
            }else {
                element.css({
                    position: "absolute",
                    top: top
                });    
            }
        });
    };
    return $(this).each(function() {
        position($(this));                         
    });
};

调用很简单，直接一行代码就ok了，例如下面：

$("#float").smartFloat();

妥妥儿的，就一小段绑定就实现了id为float的标签有了智能浮动功能，效果描述就是：当id为float的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动了。

代码都出来应该会使用了呗。

html代码就可以随便写了

比如用div实现：

<div class="float" id="float"> 这是需要浮动的内容。
</div>

js页面滚动时层智能浮动定位实现: 文章来源：微信jingfeng18
web前端开始视频大全：http://www.qianduanshiping.com

转载于:https://www.cnblogs.com/qianduanshiping/p/6087401.html