固定导航(Sticky nav)
方法1:
<div class="footer">
</div>
.footer{
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute;
_top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
overflow:visible;
}
方法2:
CSS Sticky Footer,出自:http://www.cssstickyfooter.com/using-sticky-footer-code.html
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;padding-bottom: 180px;}
#footer {position: relative;margin-top: -180px;height: 180px;clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
此两种方法亦可用于顶部的导航。
固定导航(Sticky nav)的更多相关文章
- JS---封装getScroll函数 & 案例:固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- 设置导航栏nav全透明
设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...
- Bootstrap系列 -- 43. 固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定 ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- bootstrap导航栏.nav与.navbar区别
刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...
- 滚动时sticky nav
参考w3c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- 固定导航栏(jquery)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
随机推荐
- Python开发最常犯错误总结10种
不管是在学习还是工作过程中,人都会犯错.虽然Python的语法简单.灵活,但也一样存在一些不小的坑,一不小心,初学者和资深Python程序员都有可能会栽跟头.本文是Toptal网站的程序员梳理的10大 ...
- css 去除 a,checkbox 框 出现虚线
在开发过程中遇到checkbox框,第一次遇到还以为是系统自带的是这样 后来发现不是那样, 我们可以在使用css 去掉出现的虚线框,以下是我的解决方案代码: /* checkbox 去掉虚框*/:fo ...
- 关于context你必须知道的一切
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40481055,本文出自:[张鸿洋的博客] 本文大多数内容翻译自:http://w ...
- 【LintCode】判断一个字符串是否包含另一个字符串的所有字符
问题描述: 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母. 样例 给出 A = "ABCD" B = "ACD",返 ...
- 【bzoj2809】 Apio2012—dispatching
http://www.lydsy.com/JudgeOnline/problem.php?id=2809 (题目链接) 题意 给出一棵树,每个节点有两个权值${c}$,${L}$,分别代表花费和领导力 ...
- SQL Server配置管理器的“别名”功能好处,实现内外网统一以及加了端口号导致的限制
这里主要有两个别名,经过研究,最好两个都配置成一样的,减少排查. 操作: 点击[别名],右键[新建别名] 这里的别名能实现比如我一台远程服务器,加了端口的,如果要实现在SQL登录的时候,使用计算机名来 ...
- 关于PHP代码审计和漏洞挖掘的一点思考
这里对PHP的代码审计和漏洞挖掘的思路做一下总结,都是个人观点,有不对的地方请多多指出. PHP的漏洞有很大一部分是来自于程序员本身的经验不足,当然和服务器的配置有关,但那属于系统安全范畴了,我不太懂 ...
- Guava的异常工具类--Throwables
Guava为我们提供了一个非常方便并且实用的异常处理工具类:Throwables类. 这个类的API可以参见:http://docs.guava-libraries.googlecode.com/gi ...
- 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Section 1 The Two Fundamental Rules (1.5-1.6)
Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- 常用RSS订阅地址
随着Google Reader关门大吉,转战鲜果网了,RSS订阅地址经过几次折腾,丢的没剩几个了,写个文章记录一下吧,随时补充. --PS-- ,微信.微博之类的是社交平台,不能很好的梳理知识,一直用 ...