导航条固定及浮动的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ck3345143/article/details/50541976

导航条固定及浮动的实现

在工作过程中，项目用到的功能。

$.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top;
            var pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                //if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                if(scrolls > 150) {//如果滚动到页面超出最上面的导航条高度（此处150px最佳）
                    if (window.XMLHttpRequest) { //如果不是ie6
                        element.css({
                            position: "fixed",//固定定位
                            top: '50px',//距离页面顶部为top
                            display: 'block'
                        });  
                    } else { //如果是ie6
                        element.css({
                            top: scrolls
                        }); 
                    }
                }else {
                    element.css({//如果当前元素element未滚动到浏览器边缘，则使用默认样式
                        position: pos,
                        top: top,
                        display: 'block'
                    });   
                }
            });
        };
        return $(this).each(function() {
            position($(this));                       
        });
    };

调用：

$(function () {
    $("#left-menu").smartFloat();
});