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

赞 (0)

相关推荐

  • jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

    jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

    本文实例讲述了jQuery实现带延时功能的水平多级菜单效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • jQuery实现固定在网页顶部的菜单效果代码

    jQuery实现固定在网页顶部的菜单效果代码

    本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-top-fixed-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • jQuery实现可关闭固定于底（顶）部的工具条菜单效果

    jQuery实现可关闭固定于底（顶）部的工具条菜单效果

    本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果.分享给大家供大家参考,具体如下: 这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮动在页面的最底部,带一关闭按钮,一般来说,此效果可用作广告条.网站提示以及一些需要用户特别注意的地方. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fixed-buttom-adv-line-codes/ 具体

  • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jquery固定底网站底部菜单效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定底(顶)部菜单&

  • jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】

    jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】

    本文实例讲述了jQuery实现点击后高亮背景固定显示的菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 基于jquery实现导航菜单高亮显示（两种方法）

    基于jquery实现导航菜单高亮显示（两种方法）

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • jQuery实现可高亮显示的二级CSS菜单效果

    jQuery实现可高亮显示的二级CSS菜单效果

    本文实例讲述了jQuery实现可高亮显示的二级CSS菜单效果.分享给大家供大家参考.具体如下: 这里实现鼠标放在二级菜单上,一级菜单可高亮显示,以指示当前菜单所在的位置,引入了jQuery插件使其在做对简洁度方面优化的非常好,用较少的代码实现想要的功能,分享给大家. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-color-show-2level-css-menu-codes/ 具体代码如下: <!DOCTYPE html P

  • jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果.分享给大家供大家参考.具体如下: 这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效.网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-menu-set-focus-

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

    自己试着写了下: 复制代码 代码如下: $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nav").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $(".nav&

  • jQuery实现带滑动条的菜单效果代码

    jQuery实现带滑动条的菜单效果代码

    本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE

  • jQuery菜单实例(全选,反选,取消)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec

  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress

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

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

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

  • jQuery菜单插件用法实例

    本文实例讲述了jQuery菜单插件用法.分享给大家供大家参考.具体如下: 这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式. jQuery菜单插件js文件: /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) { $.fn.keleyi = f

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

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

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

  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

  • jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题

    今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").replaceWi

随机推荐