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:/ ...
随机推荐
- MYSQL EXPLAIN 很慢的原因
今天同事在查看一个SQL的执行计划的时候,EXPLAIN语句跑了2分钟.SQL命令类似: SELECT * FROM (SELECT USERID,COUNT(*) FROM TBNAME GROUP ...
- Non-ASCII characters are not allowed outside of literals and identifiers
出现这种问题,一般是在代码里面非注释的地方,出现了非ascii字符. 比较常见的情况是,在代码中出现了中文字符.比如在引用字符串时,用了中文的引号.或者在一行代码结尾处,使用了中文的分号. 这种问题在 ...
- [Linux] LVM的条带化
一.什么是条带化 当多个进程同时访问一个磁盘时,可能会出现磁盘冲突.磁盘系统对访问次数(每秒的IO操作,IOPS)和数据传输速率(读写速率,TPS)有限制. 当达到这些限制时,后面需要访问磁盘的进程就 ...
- java 线程的命名
//线程的命名 class xc2 extends Thread{ public void run(){ for(int i=0;i<20;i++){ //Thread.currentThrea ...
- .net 中生成二维码的组件
http://qrcodenet.codeplex.com/
- switch语句
应用条件语句可以很方便地使程序实现分支,但是出现分支比较多的时候,虽然可以用嵌套的if语句来解决,但是程序结构会显得复杂,甚至凌乱.为方便实现多情况选择,C++提供了一种switch开关语句. 一 ...
- ubuntu14.04配置impala的odbc连接
cdh hive和impala的odbc驱动 http://www.cloudera.com/downloads.html.html 选择 SLES 11 64-bit下载: http://www.c ...
- restfull api
REST 表示状态传输.这是一个体系结构样式,可用于设计网络服务,可以被各种客户端消耗.核心思想是,不使用如CORBA,RPC或SOAP复杂的机制在机器之间进行连接,简单的 HTTP 用于使它们之间调 ...
- 魅族手机(魅蓝note)无法作为调试设备连接到mac问题的解决
问题描述: OS X(Yosemite),ADB(1.0.32),Android Studio(1.0.1),魅蓝note手机(m1 note,Android 4.4.4,Flyme OS 4.2.0 ...
- 'Invalid parameter not satisfying: body'
afnetwork图片上传的时候出错,出现错误 2015-11-09 15:47:59.086 videoPro[3207:132795] *** Assertion failure in -[AFS ...