解決 scroll() position:fixed 抖動、導航菜單固定頭部(底部)跟隨屏幕滾動

 

一、導航欄或者頁腳正常情況下固定在頁面的相應位置，當頁面滾動后，導航欄或者頁腳固定在頁面的頂部或者底部的情景

　　一般就是將該塊的代碼樣式的position設置為fixed.固定在頂部的話，將top設置為0，或者某一個固定值(例如：200px)

　　固定在底部的話就將bottom設置為0.或者固定值。

　　實際情況下，當導航欄滑動的時候，在該模塊的位置可能會出現抖動情況。

二、解決抖動

　　在將其position:fixed的同事設置內部元素position:absolute;

　　

　　

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

 

$(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抖動的方法