JS 菜单栏一直悬浮在顶部代码
只需要把下面代码放到js中:
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".menu").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".menu").css({"position":"fixed","top":0,"left":0});
}else if(scroH<navH){
$(".menu").css({"position":"static","margin":"0 auto"});
}
console.log(scroH==navH);
})
})
上面的.menu是菜单栏的class
然后引入jquery.min.js即可
JS 菜单栏一直悬浮在顶部代码的更多相关文章
- js让菜单栏一直悬浮在顶部,经典代码
js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){ //获取要定位元素距离浏览器顶部的距离 var na ...
- 菜单栏始终浮动在顶部 js
//菜单栏始终浮动在顶部var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离//滚动条事件$(window ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 兼容IE,chrome 等所有浏览器 回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
- JS--回到顶部代码
原文地址:http://www.cnblogs.com/liguiqiang1986/articles/3132023.html JS--回到顶部代码 <!DOCTYPE html PUBLIC ...
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
随机推荐
- Python-基础-时间日期处理小结
Python-基础-时间日期处理小结 涉及对象 1. datetime 2. timestamp 3. time tuple 4. string 5. date datetime基本操作 1. 获取当 ...
- 三线程连续打印ABC
package test5; import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Reentr ...
- oracle远程连接太慢
场景:Oracle11G DB服务器上用sqlplus直接连很快(秒连),但加上服务名后却半天没反应.一台正式.一台测试都出现此问题. sqlplus:xnwz/xnwz 很快 sqlplus:xnw ...
- [内核同步]浅析Linux内核同步机制
转自:http://blog.csdn.net/fzubbsc/article/details/37736683?utm_source=tuicool&utm_medium=referral ...
- winform中DataGrid控件的宽度设置
最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找 ...
- JVM参数(二)参数分类和即时(JIT)编译器诊断
在这个系列的第二部分,我来介绍一下HotSpot JVM提供的不同类别的参数.我同样会讨论一些关于JIT编译器诊断的有趣参数. JVM 参数分类 HotSpot JVM 提供了三类参数.第一类包括了标 ...
- 如何删除控制文件中过去rman备份到磁带的备份集
问题描述: 早上做数据库巡检,发现FRA(flash recovery area)空间使用率达到66%,是平时的两倍.由于库不大,备份策略是本地磁盘备份,每天一全备,REDUNDANCY 1 ,备份完 ...
- Selenium
Selenium可以抓取完整的页面的html但是request 和java的url不能抓的很完整. selenium的方法是dirver.page_source
- XE6移动开发环境搭建之IOS篇(1):准备安装材料(有图有真相)
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.选择方案 --- ...
- 解决:新版火狐浏览器3d打不开
重启:按 Ctrl + Shift + L 键唤出 3d 视图 参考文档:http://tieba.baidu.com/p/4606488108