`
gaofan0528
  • 浏览: 18757 次
社区版块
存档分类
最新评论

固定导航栏

 
阅读更多

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

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

 

分享到:
评论

相关推荐

    下滑固定导航栏插件Scroll.zip

    下滑固定导航栏插件Scroll是一种常见的网页交互设计技术,它主要应用于网站的用户界面,以提升用户的浏览体验。当用户滚动页面时,导航栏会在页面的某个特定位置(通常是到达顶部或设定位置)自动变为固定状态,使得...

    jQuery——固定导航栏

    本篇将详细介绍如何使用jQuery实现一个固定导航栏的功能。 首先,我们要理解“固定定位”(fixed positioning)的概念。在CSS中,当一个元素的position属性设置为"fixed"时,该元素会脱离常规文档流,相对于浏览器...

    固定导航栏.html

    本章节通过使用html中的div布局,完成静态页面的制作,然后结合css3中的fixet固定位置属性来固定导航栏部分,最后利用window.onscroll来获取滑动的距离来确定导航栏固定的位置,这些...最终完成该固定导航栏的制作。

    顶部浮动固定导航条

    在网页设计中,"顶部浮动固定导航条"是一种常见的用户界面设计模式,它能提供一致的导航体验,无论用户在页面的哪个位置滚动,导航条始终保持在屏幕的顶部可见。这种设计方法通常用于大型网站或内容丰富的页面,以...

    jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效

    本教程将深入探讨“jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效”的实现,这是一种现代化、动态效果丰富的网页导航解决方案。 首先,我们要理解这个特效的核心技术——jQuery和CSS3。jQuery是一个广泛使用的...

    jQuery原生左侧栏固定导航条(支持展开折叠)

    本文将深入探讨如何使用jQuery实现一个原生的左侧栏固定导航条,该导航条还支持展开和折叠功能。我们将围绕“固定导航条”和“jQuery”这两个关键标签展开讨论。 首先,"固定导航条"(Fixed Navigation Bar)是一种...

    导航栏滚动到顶部后固定

    固定导航栏的实现主要依赖于CSS中的position属性。通常,我们设定导航栏的position为fixed,top为0,left为0,使其固定在浏览器窗口的顶部。同时,设置适当的z-index值确保导航栏始终位于其他元素之上。这样,当用户...

    stickUp做固定导航栏

    5. **简单集成**:只需引入jQuery库和stickUp插件的JavaScript文件,然后在代码中调用插件并配置参数,就可以快速实现固定导航栏效果。 6. **社区支持**:由于stickUp是一个开源项目,它拥有活跃的开发者社区,不断...

    jQuery固定导航随页面滚动颜色渐变

    在网页设计中,导航栏是用户浏览网站时的重要指引,而固定导航栏(Fixed Navigation)则能在用户滚动页面时始终保持在屏幕顶部,提供持续的导航服务。"jQuery固定导航随页面滚动颜色渐变"这个主题涉及到的技术点主要...

    CSS3通用顶部固定导航栏代码.rar

    【标题】"CSS3通用顶部固定导航栏代码.rar"是一个包含使用CSS3技术实现的通用顶部固定导航栏的代码资源。这种导航栏在网页滚动时始终保持在屏幕顶部,为用户提供一致的导航体验,不论他们浏览页面的哪个部分。在网页...

    JQ 智能判断固定导航条或侧边栏

    本文将深入探讨如何使用jQuery实现智能判断固定导航条或侧边栏的功能,这是一个常见且实用的设计元素,能够提升用户体验,使网站在滚动时保持关键导航元素的可见性。 首先,我们需要理解固定定位(fixed ...

    三种样式固定导航栏随着页面滚动而滚动.zip

    "三种样式固定导航栏随着页面滚动而滚动"的主题涉及到CSS(层叠样式表)和JavaScript技术,这两种技术常用于实现动态交互效果。在这个压缩包中,可能包含的是三个不同的示例,分别展示了如何用不同方式实现导航栏的...

    jQuery左侧固定导航栏点击滑动对应页面.zip

    jQuery左侧固定导航栏点击滑动对应页面,一般我们在我们的企业网站或者商城网站都会有在线客服,一般使用qq的形式来展示,或者以网页的形式,一般企业网站在导航栏就会直接显示联系我们!php中文网推荐下载!

    jQuery左侧固定导航栏插件stickySidebar.zip

    《jQuery左侧固定导航栏插件stickySidebar详解》 在网页设计中,良好的用户体验至关重要,而一个优秀的导航栏设计能够极大提升用户的浏览体验。"jQuery左侧固定导航栏插件stickySidebar"便是为此目的而生,它使得侧...

    jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效.zip

    《jQuery+CSS3左侧固定导航栏子菜单3D展开动画特效详解》 在网页设计中,用户友好的导航栏是至关重要的,它可以帮助用户轻松地浏览网站内容。本篇文章将详细解析“jQuery+CSS3左侧固定导航栏子菜单3D展开动画特效”...

    38、jQuery左侧固定导航栏插件stickySidebar

    本文将详细讲解"jQuery左侧固定导航栏插件stickySidebar"这一主题,帮助你理解如何利用这个插件创建高效且用户体验良好的网页布局。 首先, stickySidebar 是一个专门用于创建响应式页面布局的jQuery插件。它的主要...

    jQuery CSS3左侧固定导航栏子菜单3d展开动画特效.zip

    js特效-jQuery CSS3左侧固定导航栏子菜单3d展开动画特效

    横向滑动导航

    此外,ViewPager还支持添加头部和尾部视图,使得在顶部或底部添加固定导航栏成为可能。 在"顶部横向导航栏的效果"中,ViewPager经常被用作实现这种效果的主要工具。通常,顶部的导航栏会包含一系列的图标或文字,每...

    css实现固定导航栏位置

    代码不多,胜在实用,适合刚接触的小白学习

Global site tag (gtag.js) - Google Analytics