固定导航(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)侧边栏文 ...
随机推荐
- Linux File System
目录 . Linux文件系统简介 . 通用文件模型 . VFS相关数据结构 . 处理VFS对象 . 标准函数 1. Linux文件系统简介 Linux系统由数以万计的文件组成,其数据存储在硬盘或者其他 ...
- 关于 SSV-ID: 4474 POC的分析和思考
SSV-ID: 4474 SSV-AppDir: Discuz!漏洞 发布时间: 2008-11-21 (GMT+0800) URL:http://sebug.net/vuldb/ssvid-4474 ...
- A.Kaw矩阵代数初步学习笔记 9. Adequacy of Solutions
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- DLUTOJ1216
题目大意是:给出N个正整数,其中至多有一个数只出现一次,其余的数都出现了两次.判断是否有某个数只出现一次,若有输出这个数,否则输出“-1”. 1<=N<=5000000 这道题的正解是用位 ...
- POJ 1659 Frogs' Neighborhood(Havel-Hakimi定理)
题目链接: 传送门 Frogs' Neighborhood Time Limit: 5000MS Memory Limit: 10000K Description 未名湖附近共有N个大小湖泊L ...
- Mac配置一些开发环境(随时补充)
Mac安装mysql并启动 brew install mysql mysql.server start /usr/local/Cellar/mysql/5.6.10/support-files/mys ...
- hdu 2031 杨辉三角
题意:显示杨辉三角形. 解法: 组合数学公式:combi(n,m)=combi(n-1,m-1)+combi(n-1,m); 至于为什么有这个公式呢?那就是高中数学的内容啦 1: #include&l ...
- Bumped Map And Normal Map
http://freespace.virgin.net/hugo.elias/graphics/x_polybm.htm 先留着,准备以后开垦
- Raspberry Pi 3 --- identify the version of linux kernal file
open it
- python不同模式打开文件的完全列表
模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件指 ...