jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)_jquery

自己试着写了下:

复制代码 代码如下:

$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
}else if(scroH<navH){
$(".nav").css({"position":"static","margin":"0 auto"});
}
})
})

主要思路
  1.当这个元素进入可视区域后,然后要离开可视区域的时候,就改变定位方式。
  2.当元素回离浏览器顶部最初高度时,再还原其定位方式l
在线演示:http://demo.jb51.net/js/2012/myfix/
DEMO下载:http://www.jb51.net/jiaoben/45053.html

时间: 2024-08-31 00:08:04

jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)_jquery的相关文章

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部_jquery

  复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

jquery实现的让超出显示范围外的导航自动固定屏幕最顶上_jquery

其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改.当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧 复制代码 代码如下: $().ready(function(){ //导航距离屏幕顶部距离 var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); //

Qt学习之路(13):菜单和工具条(续)

前面一节我们已经把QAction添加到菜单和工具条上面.现在我们要添加一些图片美化一下,然后把信号槽加上,这样,我们的action就可以相应啦! 首先来添加图标.QAction的图标会显示在菜单项的前面以及工具条按钮上面显示. 为了添加图标,我们首先要使用Qt的资源文件.在QtCreator的项目上右击,选择New File...,然后选择resource file. 然后点击next,选择好位置,Finish即可.为了使用方便,我就把这个文件建在根目录下,建议应该在仔细规划好文件之后,建在专门

绘图-MFC中如何给CLientDC添加滚条

问题描述 MFC中如何给CLientDC添加滚条 小弟在MFC中的View类中用clientDC进行绘图,但是加了滚条之后拖动滚条,原来绘制的图形都会消失,点击最小化或者改变Client区的大小也会侍原来的图形消失,请问有没有什么办法可以实现滚条的功能? 解决方案 其实加滚动条很简单,View类继承CScrollView,然后就可以有滚动条了.然后设置滚动视图的大小和单页大小以及单步滚动的大小.如下:CRect rcClient;GetClientRect(&rcClient);CRect rc

Qt学习之路(12):菜单和工具条

在前面的QMainWindow的基础之上,我们开始着手建造我们的应用程序.虽然现在已经有一个框架,但是,确切地说我们还一行代码没有写呢!下面的工作就不那么简单了!在这一节里面,我们要为我们的框架添加菜单和工具条. 就像Swing里面的Action一样,Qt里面也有一个类似的类,叫做QAction.顾名思义,QAction类保存有关于这个动作,也就是action的信息,比如它的文本描述.图标.快捷键.回调函数(也就是信号槽),等等.神奇的是,QAction能够根据添加的位置来改变自己的样子 --如

[Eclipse]GEF入门系列(六、添加菜单和工具条)

我发现一旦稍稍体会到GEF的妙处,就会很自然的被它吸引住.不仅是因为用它做出的图 形界面好看,更重要的是,UI中最复杂和细微的问题,在GEF的设计中无不被周到的考虑并以 适当的模式解决,当你了解了这些,完全可以把这些解决方法加以转换,用来解决其他领域 的设计问题.去年黄老大在一个GEF项目结束后,仍然没有放弃对它的继续研究,现在甚至利 用业余时间开发了基于GEF的SWT/JFace增强软件包,Eclipse和GEF的魅力可见一斑.我相信 在未来的两年里,由于RCP/GEF等技术的成熟,Java

jQuery菜单插件superfish使用指南

  jQuery菜单插件superfish使用指南          Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍.你可能用Superfish实现多种菜单效果. Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支持,如Fir

jQuery实现的导航条切换可显示隐藏_jquery

用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</title> <script language="javascript" type="

使用jquery菜单插件HoverTree仿京东无限级菜单_jquery

效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单.当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单. HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>HoverTree - jquery菜单插件</title> <base t