// 菜单固定
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $("#topp").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$("#topp").css({"position":"fixed"});
}else if(scroH<navH){
$("#topp").css({"position":"relative"});
}
})
})

页面滚动,菜单固定到顶部

jquery页面滚动,菜单固定到顶部的更多相关文章

  1. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  2. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  4. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  5. jquery 页面滚动tab自动定位,tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  6. Jquery当div超出页面时就固定到顶部否则跟随页面滚动

    $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top ...

  7. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  8. jQuery页面滚动右侧浮动导航切换

    体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...

  9. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

随机推荐

  1. [Angular2 Router] Lazy Load Angular 2 Modules with the Router

    Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...

  2. 三星galaxy s4问题解决及快捷操作

    http://blog.csdn.net/pipisorry/article/details/38474827 三星galaxy s4更改锁屏方式时出现故障 屏幕锁定设置除password以外,其它锁 ...

  3. 深入了解android平台的jni(一)

    android中很多Java类都具有native接口,这些接口由本地实现,然后注册到系统中.     主要的JNI代码放在以下的路径中:frameworks/base/core/jni/,这个路径中的 ...

  4. 使用openssl工具生成证书

    第一步. 生成rsa私钥文件 :\> openssl genrsa -out bexio.pem 1024 : 若要加密生成的rsa私钥文件(des3加密) :\> openssl gen ...

  5. jQuery 的 live() 方法对 hover 事件的处理

    因为hover不是标准的事件,因此无法直接使用live进行处理,故使用以下方法代替,效果一样 <script type="text/javascript"> $(&qu ...

  6. MySQL数据库InnoDB存储引擎中的锁机制

    MySQL数据库InnoDB存储引擎中的锁机制    http://www.uml.org.cn/sjjm/201205302.asp   00 – 基本概念 当并发事务同时访问一个资源的时候,有可能 ...

  7. MYSQL 5.7 主从复制 -----GTID说明与限制 原创

    http://www.cnblogs.com/cenalulu/p/4309009.html http://txcdb.org/2016/03/%E7%B3%BB%E7%BB%9F%E8%A1%A8- ...

  8. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  9. seleniu IDE 点点滴滴

    在使用selenium webdriver +python 的过程中遇见了许多的问题,这些问题在网上都没有找到很好的答案,后来在看selenium IDE的时候发现这里面有很好的解决方法,写写.记记. ...

  10. C#基础--.net平台的重要组成部分以及.net程序简单的编译原理

    .net平台的组成只要有两部分   FCL:框架类库    CLR:公共语言运行时 .net程序简单的编译原理 1.0:使用C#编译器(csc.exe) 将C#源代码编译成程序集+{编译之前:会检查C ...