// 菜单固定
$(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. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  2. 为什么Wireshark无法解密HTTPS数据

    为什么Wireshark无法解密HTTPS数据 导读 由于需要定位一个问题,在服务器上tcpdump抓取https数据包,然后下载到本地打开wireshark分析.然后我们下载域名私钥配置到wires ...

  3. SimpleUrlHandlerMapping 处理器映射的配置--转

    http://blog.csdn.net/rainier001/article/details/6860491 <?xml version="1.0" encoding=&q ...

  4. Java最重要的21个技术点和知识点之JAVA集合框架、异常类、IO

    (三)Java最重要的21个技术点和知识点之JAVA集合框架.异常类.IO  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享 ...

  5. Python xml 解析百度糯米信息

    先利用爬虫利用百度糯米提供的api来采集北京当天的团购信息,保存为numi.html import xml.etree.ElementTree as ET import os class Nuomi( ...

  6. IOS开发 xcode报错之has been modified since the precompiled header was built

    转载的文章  很实用 IOS开发xcode报错之has been modified since the precompiled header was built 今天做百度地图的时候第一次发现下面错误 ...

  7. 小小的封装了一个pie的echarts

    function showData(ele,arr1,arr2){ var myChart2 = echarts.init(document.getElementById(ele)); var opt ...

  8. Java基础知识强化之多线程笔记05:Java中继承thread类 与 实现Runnable接口的区别

    1. Java中线程的创建有两种方式:  (1)通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中. (2)通过实现Runnable接口,实例化Thread类. 2. ...

  9. p45.asm

    ; ========================================== ; pmtest3.asm ; 编译方法:nasm pmtest3.asm -o pmtest3.com ; ...

  10. Xcode6编译SDWebImage报错解决方法(SDWebImageDownloaderOperation.m错误)

    报错:Use of undeclared identifier '_executing' / '_finished': 解决方法: 在SDWebImageDownloaderOperation类的实现 ...