解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

 

一、导航栏或者页脚正常情况下固定在页面的相应位置，当页面滚动后，导航栏或者页脚固定在页面的顶部或者底部的情景

　　一般就是将该块的代码样式的position设置为fixed.固定在顶部的话，将top设置为0，或者某一个固定值(例如：200px)

　　固定在底部的话就将bottom设置为0.或者固定值。

　　实际情况下，当导航栏滑动的时候，在该模块的位置可能会出现抖动情况。

二、解决抖动

　　在将其position:fixed的同事设置内部元素position:absolute;

　　

　　

1 <div id="footer" style="line-height: 35px;"><!-- class="row" -->
2             <div class="col-md-12 text-right" style="position:absolute;bottom: 8px;right:20px;">
3                 <div class="btn-group" role="group">
4                 </div>
5             </div>
6 </div>

View Code

 

$(window).scroll(
        function () {
            var bottom_height = $(document).height() - $(window).scrollTop() - $(window).height(),
                footer = $("#footer");
            if (bottom_height < 54) {
                //console.log("b==="   bottom_height);
                footer.removeClass("sub_button");
            } else {
                footer.addClass("sub_button");
                footer.find(".col-md-12").css("bottom", "3px");
        }
    });

 

--------------2016-7-11 16--

　　　　source：【1】几种解决position:fixed抖动的方法