固定导航栏
程序员文章站
2024-03-15 13:40:41
...
固定导航栏菜单跟随页面滚动变化
$(function () { var nav=$('#title') var win=$(window) var documt=$(document) win.scroll(function () { if (documt.scrollTop()>45){ nav.css('position','fixed') nav.css('top','0'); }else{ nav.css('position','relative') nav.removecss('top') } }) })
利用jQuery可以达到该效果
在距离顶部45px时他会变化
也可以利用一个jQuery里的插件 Postfixed 实现效果
Posfixed 能够让网页的导航或表头等固定在顶部
$(document).ready(function(){ $("#title").posfixed({ distance:0, pos:"top", type:"while", hide:false }); }); type 固定的方式,while 或 always,while 为滚动条滚动到 distance 的数值时固定; always 为一直固定 默认值while hide 是否自动隐藏固定的对象 默认值false distance 离顶部或底部的数值 默认值0
响应式设计 自适应屏幕宽度 需要在头部head加meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport是网页默认的宽度和高度 不能使用绝宽度 width不能设置为xxxpx 只能设置为xx% 或者
width auto ;
字体也不可以设置成xxpx 设置成xxem相对值
需要给所有块级设置为浮动的
图片自适应 给图片的div加 max-width100%
自适应网页设计”的核心,就是CSS3引入的Media Query模块
意思就是,自动探测屏幕宽度,然后加载相应的CSS文件
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> 这段代码的意思是屏幕宽度小于400像素时 执行加载 tinyscreen.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
上一篇: 块级元素 返回顶部
下一篇: 正则表达式 一些用法 表
推荐阅读
-
固定导航栏
-
Google地址栏图标变身
-
Mac中的Finder添加地址栏 博客分类: Mac pathfinder地址栏
-
Chrome 即将大变:多账户,增强 Omnibox,移除地址栏?
-
地址栏传入List参数 地址栏出入List
-
获取地址栏的属性 博客分类: Web JS地址栏URL
-
tab布局 博客分类: Android viewpager导航栏androidfragment
-
js获取url指定参数值 jsurl参数地址栏
-
tab布局 博客分类: Android viewpager导航栏androidfragment
-
谷歌浏览器使用百度引擎跳转到百度主页的问题 博客分类: 浏览器设置 谷歌浏览器地址栏跳转百度主页