解决 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抖动的方法
解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动的更多相关文章
- Jquery几行代码解决跟随屏幕滚动DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决 IE6 position:fixed 固定定位问题
#e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
- 完美解决IE6中fixed抖动问题的方法
我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的.通常的 ...
- Android 底部菜单固定到底部
今天搞了很久的一个问题,导航菜单没有固定到底部,因为上面是ListView,可是没内容,于是就浮动上去了. 效果如下: 这里采用的是一个碎片,代码是: <LinearLayout xmlns:a ...
- table固定头部,tbody内容滚动
直觉的感受是修改thead与tbody,尝试了以下几种方法,但均告失败. 1. 将tbody设置为块状元素,然后设置表格的高度与溢出: 1. 将thead设置为绝对定位,然后设置表格的高度与溢出: 1 ...
- 导航菜单:jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
- 解决IE6不支持position:fixed;的问题
在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...
- IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...
随机推荐
- 一个关于Delphi XML处理单元的BUG
使用delphi的XML处理单元 XMLDoc XMLIntf 在获取XML文本内容的时候, 高版本的Delphi会丢失编码描述....在D7上却是正常的, 下面是测试源码: procedure TF ...
- 如何获取网页上的LOGO
一般公司网页上的图片都会禁止右键另存为,用截图工具接下来的图会带背景色,PS成背景透明有点费时间. 用Google Chrome 或Firefox 打开目标网页,右键点击审查元素,将鼠标放在图片上,一 ...
- 能套用的tab栏切换
效果: 在style.js文件里封装了一个Show函数,有4个参数,di(当前点击的按钮),num(按钮个数,也可以说是下面具体内容个数),divn(一个id前缀,这个例子里是ta,),active( ...
- lua module环境探秘
module 作用 module (name [, ···]) Creates a module. If there is a table in package.loaded[name], this ...
- [转] 基于MySQL的秒杀核心设计(减库存部分)-防超卖与高并发
商品详情页面的静态化,varnish加速,秒杀商品库独立部署服务器这种就略过不讲了.只讨论库存部分的优化 mysql配置层面的优化可以参考我的这篇文章 <关于mysql innodb引擎性能优化 ...
- Leetcode: Path Sum III
You are given a binary tree in which each node contains an integer value. Find the number of paths t ...
- JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么?
JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么? 联系: JSP 是 Servlet 技术的扩展,本质上是 Servlet 的简易方式,更强调应用的外表表达. JSP编译后是& ...
- java字符串相关
String类默认对equals方法进行了重写,比较的是字符串的字符,而非是object中equals方法默认的比较两个对象的内存地址
- 将序列化成json格式的日期(毫秒数)转成日期格式
<script> $(function () { loadInfo(); }) function loadInfo() { $.post("InfoList.ashx" ...
- SQL批量添加主键脚本
--SQL批量添加主键脚本 --操作提示:运行此脚本前请记得备份您要操作的数据库 --实现功能:执行脚本后数据库中的所有数据表都会有一个主键 --添加规则1:主键名称为ID(可自己修改),数据类型为整 ...