固定导航栏

固定导航栏菜单跟随页面滚动变化

$(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文件。

猜你喜欢