// 菜单固定
$(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. 浅谈模块化的JavaScript

    模块化JavaScript之风早已席卷而来, CommonJS . AMD . NodeJS .RequireJS . SeaJS . curljs  等模块化的JavaScript概念及库扑面而来, ...

  2. volatile synschonized的区别

    在一次面试中,被问到volatile与synschonized的区别,概念模模糊糊,今天做一个总结,加强自己的认识. 本文参考http://www.cnblogs.com/dolphin0520/p/ ...

  3. C语言输出单个汉字字符

    #include "stdio.h" #include "windows.h" int main() { ] = { "多字节字符串!OK!" ...

  4. Reservoir Sampling - 蓄水池抽样

    问题起源于编程珠玑Column 12中的题目10,其描述如下: How could you select one of n objects at random, where you see the o ...

  5. C++面试题:list和vector有什么区别?

    原文:http://genwoxuevc.blog.51cto.com/1852984/503337 C++面试题:list和vector有什么区别?考点:理解list和vector的区别出现频率:★ ...

  6. 微信js接口自定义分享内容

    最近客户有个要求,需要给网页添加微信分享功能,当然指的是用微信自带浏览器的时候,希望用户在最后一页点击分享的时候是分享的首页.曾经无意中看到过微信公众开发者平台提供了js接口,所以试着做了做,果然,跌 ...

  7. java使用jsp servlet来防止csrf 攻击的实现方法

    背景: 1.csrf知识 CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或 ...

  8. Booting ARM Linux

    来源:linux-2.6.30.4/Documentation/arm/Booting ARM Linux Booting ARM Linux            ================= ...

  9. LINUX ping 指定网卡

    计算机上有多块网卡(例如笔记本电脑的无线网卡和以太网卡)连接至网络,使用ping命令想指定使用哪块网卡怎么办? ping -I eth0 10.10.10.1ping -I eth1 10.10.10 ...

  10. 【技术文档】XuebaOnline配环境时遇到的问题和解决办法

    在Ubuntu下装XuebaOnline可能遇到的问题和解决办法 自动安装Python3.0以上版本 编译命令采用python3 manage.py runserver,所以在linux系统下需要安装 ...