固定导航(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)侧边栏文 ...
随机推荐
- 系统间通信(4)——IO通信模型和JAVA实践 中篇
4.多路复用IO模型 在"上篇"文章中,我们已经提到了使用多线程解决高并发场景的问题所在,这篇文章我们开始 4-1.现实场景 我们试想一下这样的现实场景: 一个餐厅同时有100位客 ...
- 匿名内部类为什么访问外部类局部变量必须是final的?
1.内部类里面使用外部类的局部变量时,其实就是内部类的对象在使用它,内部类对象生命周期中都可能调用它,而内部类试图访问外部方法中的局部变量时,外部方法的局部变量很可能已经不存在了,那么就得延续其生命, ...
- 编译器角度看C++复制构造函数
[C++对象模型]复制构造函数的建构操作 关于复制构造函数的简单介绍,可以看我以前写过的一篇文章C++复制控制之复制构造函数该文章中介绍了复制构造函数的定义.调用时机.也对编译器合成的复制构造函数行为 ...
- css-IE中的border-radius和box-shadow
1.今天遇到一个问题,在给一个图片设置border-radius时,firefox和chrome表现正常,但是在IE中就无效,在IE中必须给图片设置一个边框,比如设置一个透明的边框就可以正常显示. 2 ...
- nginx location在配置中的优先级
location表达式类型 ~ 表示执行一个正则匹配,区分大小写~* 表示执行一个正则匹配,不区分大小写^~ 表示普通字符匹配.使用前缀匹配.如果匹配成功,则不再匹配其他location.= 进行普通 ...
- centos安装altas
centos6.6 atlas2.2.1 atlas项目 https://github.com/Qihoo360/Atlas/releases yum -y install gcc make ncur ...
- MVC5-6 帮助类
视图帮助类 HtmlHelper HtmlHelper给我们封装了大量的常用方法,使我们的开发更具高效.那么其中有哪里是我们常用的呢? BingForm 生成form表单 上图简单的使用了Html.B ...
- 在CentOS上安装Sublime Text
CentOS 是基于 Red Hat (RHEL) 的, 其中并没有包管理工具 apt. 最近需要在装了 CentOS 系统的服务器上安装Sublime Text, 到官网上看了一下, 对其他 (De ...
- 淘宝npm镜像
来源:https://cnodejs.org/topic/4f9904f9407edba21468f31e 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在 ...
- JS-DOM对象知识点汇总(慕课)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...