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

  一般就是将该块的代码样式的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抖动的方法

解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动的更多相关文章

  1. Jquery几行代码解决跟随屏幕滚动DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 解决 IE6 position:fixed 固定定位问题

    #e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...

  3. 完美解决 IE6 position:fixed 固定定位问题

    关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...

  4. 完美解决IE6中fixed抖动问题的方法

    我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的.通常的 ...

  5. Android 底部菜单固定到底部

    今天搞了很久的一个问题,导航菜单没有固定到底部,因为上面是ListView,可是没内容,于是就浮动上去了. 效果如下: 这里采用的是一个碎片,代码是: <LinearLayout xmlns:a ...

  6. table固定头部,tbody内容滚动

    直觉的感受是修改thead与tbody,尝试了以下几种方法,但均告失败. 1. 将tbody设置为块状元素,然后设置表格的高度与溢出: 1. 将thead设置为绝对定位,然后设置表格的高度与溢出: 1 ...

  7. 导航菜单:jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

  8. 解决IE6不支持position:fixed;的问题

    在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...

  9. IE6不支持position:fixed的解决方法

    解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

随机推荐

  1. ie下如果已经有缓存,load方法的效果就无法执行.的解决方法

    <script type="text/javascript">        $(document).ready(function(){        $('img') ...

  2. Day12~13(2016/2/1~2/2)

    进度:实现了自定义标题栏控件并调用

  3. jfinal路由简单解析

    在jfinal中,通过JFinalFilter对所有的类进行过滤. 以下是路由的调用关系(我在调用关系旁边做了标记,会贴出具体的代码和解释): -1- Config: Routes -2- Inter ...

  4. 关于IOS的证书、App ID、设备、Provisioning Profile详述

    首先,打开developer.apple.com ,在iOS Dev Center打开Certificates, Indentifiers & Profiles认识一下基本结构.列表就包含了开 ...

  5. ConcurrentHashMap Put()操作示例代码

    非常简练: private static void put(MetricKey key, float value) { MetricValue current; do { current = map. ...

  6. Oracle等待事件db file parallel read

    SQL> select event#,name,parameter1,parameter2,parameter3 from v$event_name where name = 'db file ...

  7. [PCL]ApproximateVoxelGrid

    点云滤波继承自Filter模板类 注意Filter类的filter 方法调用了虚方法applyFilter: inline void filter (PointCloud &output) { ...

  8. Linux配置SSH免密码登陆

    配置环境: 两台centos 6.4虚拟机,/etc/hosts配置如下 192.168.63.128 hadoop001 --master192.168.63.131 hadoop002 --sla ...

  9. input上传按钮 文字修改办法

    解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...

  10. http协议 301和302的原理及实现

    一.来看看官方的说法: 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:  301 redirect: 301 代表永久性转移(Permanently Moved) ...