• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > header导航菜单固定 当页面往下拉时固定导航

header导航菜单固定 当页面往下拉时固定导航

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含导航固定,固定菜单等相关知识,佚名 希望在学习及工作中可以帮助到您
最近开发的一个网站头部分为上下两块,上面是快捷入口部分,下面是导航菜单部分。现在的需求是当页面往下拉时,快捷入口部分被遮住,而导航菜单固定,而且处于window最上面。在StackOverflow网站上搜集过资料,并且参照网站http://ilikecss.com/web-design/examples/framework/20110928/的源代码,发现实现该功能的关键步骤有两点,第一点是需要创建两个header,一个是固定的导航菜单栏,一个是常规的头部(包括快捷入口部分和导航菜单)。另外一点是需要设置z-index的值(对于非static的position来说,z-index越大,它离用户也就越近,这样就可以在初始时遮住固定部分的导航菜单,而当页面往下拉时,随着常规菜单被遮住,固定部分也就浮出来了。)

具体效果请转往jsfiddle网站:http://jsfiddle.net/tounaobun/AnTQU/
下面是具体代码:

您可能想查找下面的文章:

  • header导航菜单固定 当页面往下拉时固定导航

相关文章

  • 2017-08-06Firefox专属hack的写法介绍
  • 2017-08-06css 单图片按钮实例(css 图片变换)
  • 2017-08-06CSS实现鼠标滑过文字弹出一段说明文字无JS代码
  • 2017-08-06min-width最小宽度的作用介绍
  • 2017-08-06css a标签的visied伪类失效原因介绍
  • 2017-08-06利用column多列属性调整页面文字列布局
  • 2017-08-06什么是@font-face及font-face如何在css中使用
  • 2017-08-06详解CSS中的flex容器与flex属性
  • 2017-08-06css教程制作css圆角边框(兼容全部浏览器)
  • 2017-08-06移动端Web页面的CSS3 flex布局快速上手指南

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 绝对令人的惊叹的CSS3折叠效果(3D效果)整理
    • CSS3打造磨砂玻璃背景效果
    • CSS定义的PNG透明效果兼容各浏览器
    • 让CSS代码更具有易维护性
    • CSS3盒子模型详解
    • 网站导航菜单的分割线和水平居中
    • 一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
    • 在IE6/7/8下识别html5标签(让老式浏览器识别html5)
    • table自动拉伸在chrome与IE中的兼容性问题解决
    • css控制UL LI 的样式详解(推荐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有