导航栏置顶

最新推荐文章于 2022-11-05 17:30:24 发布

都羡一骑红尘妃子笑

最新推荐文章于 2022-11-05 17:30:24 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签：导航吸顶置顶固定

本文链接：https://blog.csdn.net/zheng_y1/article/details/74577203

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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