导航栏置顶

来源：互联网发布：飞秋2013正式版 mac版编辑：程序博客网时间：2024/06/10 07:41
1、实现顶部和侧边导航吸顶，侧边导航在footer接触导航底部时被上顶。
2、效果图
3、代码段
                顶部导航
顶部导航
顶部导航
顶部导航
顶部导航
                                                                                    左侧导航1
                                左侧导航1
                                左侧导航1
                                左侧导航1
                                左侧导航1
                                左侧导航1
                                左侧导航1
                                左侧导航1
                            
                        
        //导航吸顶        var forHeadHeight = $(".forHeadHeight").height();        var contentHeadHeight = $(".index-content .content-head").height();        var leftListHeight = $(".index-content .content-body .body-left").height();        var leftListWidth = $(".index-content .content-body .body-left").width();        var sWidth = $(window).width();        //屏幕变化时宽度取值改变        $(window).resize(function(){           sWidth = $(window).width();           leftListWidth = $(".index-content .content-body .body-left").width();           $(".index-content .content-body .left-list").css({"width":leftListWidth});        });        $.fn.smartFloatTop = function(offsetTop,topHeight,index,backgroundColor) {            var position = function(element) {                var top = element.offset().top-offsetTop, pos = element.css("position");                $(window).scroll(function() {                    var scrollTop = $(this).scrollTop();                    if (scrollTop >= top) {                            element.css({                                "position": "fixed",                                "top": topHeight+'px',                                "width":"100%",                                "z-index":index,                                "background-color":backgroundColor,                            });                     }else {                        //取消吸顶                        element.css({                        "position": pos,                        "top":top,                        });                     }                });            };            return $(this).each(function() {                position($(this));                  });};        //导航吸顶，被底部撑上          $.fn.smartFloatNav = function(offsetTop,topHeight,index,backgroundColor) {            var position = function(element) {                var top = element.offset().top-offsetTop, pos = element.css("position");                $(window).scroll(function() {                    var scrollTop = $(this).scrollTop();                    if (scrollTop >= top) {                        //吸顶                        element.css({                            "position": "fixed",                            "top": topHeight+'px',                            "width":leftListWidth,                            "z-index":index,                            "background-color":backgroundColor,                            "box-sizing":"content-box",                            "padding":"0 10px",                            "border-right":"1px solid #cfcfcf",                            "border-left":"1px solid #cfcfcf"                        });                         var fTop = $(".foot-nav").offset().top;                        var fScrollTop = $(".foot-nav").scrollTop();                        var wScrollTop = $(window).scrollTop();                        var allHeight = forHeadHeight + contentHeadHeight+leftListHeight;                        var otherHeight = forHeadHeight + contentHeadHeight;                        var fOffset = wScrollTop+allHeight-fTop;                        if(sWidth>991){                            if(fTop
阅读全文
0 0