zoukankan      html  css  js  c++  java
  • 解决 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抖动的方法

  • 相关阅读:
    《构建之法》心得体会
    简单工厂模式加减乘除器
    个人简介
    单元测试和代码覆盖率工具的使用
    Bookstore系统缺陷报告
    《构建之法读后感》
    3137102432_ 施少兵_ lab3
    3137102432_施少兵_实验2
    个人简介
    第六次作业:购物系统缺陷
  • 原文地址:https://www.cnblogs.com/mxh1099/p/5660706.html
Copyright © 2011-2022 走看看