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:/ ...
随机推荐
- UIButton的使用
使用UIButton时需要注意的是: 1.UIButton的创建有专门的类方法(buttonWithType:,UILabel没有): 2.UIButton常用的属性包括:frame.titile.t ...
- winform中dataGridView高度自适应填充完数据的高度
// winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...
- 关于android存储
今天在测试android拍照功能时遇到一个困惑:照片拍成功了,程序能都能读取到,但是在手机储存中怎么也找不到拍的照片.先将学习过程中经过的曲折过程记录如下: 一:拍照并保持 通过调用android 的 ...
- mysql 外键约束
外键的定义语法:[CONSTRAINT symbol] FOREIGN KEY [id] (index_col_name, ...) REFERENCES tbl_name (index_col ...
- JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址
JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...
- Linux scp复制文件,不需要输入密码的技巧
当两台LINUX主机之间要互传文件时可使用SCP命令来实现,建立信任关系之后可不输入密码. 把你的本地主机用户的ssh公匙文件复制到远程主机用户的~/.ssh/authorized_keys文件中 假 ...
- 随笔 高质量 C++/C 编程指南
内存分配方式有三种:) 从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量, static 变量.) 在栈上创建.在执行函数时,函数内局部变量的存储 ...
- DataTable与DataSet
转自:http://www.cnblogs.com/rjf1979/archive/2010/09/09/1822667.html DataSet包含很多个DataTable 一张表的时候用DataT ...
- gcc与makefile编译 BY 四喜三顺
gcc编译控制过程:(假设源代码为a.c)(1)源文件到预处理文件: gcc -E -o a.cxx a.c a.cxx显示调用哪些头文件(2)生成汇编代码: g ...
- dijkstra
寻找从源结点到其他点之间的最短距离. 把给出的结点分成两组,一组a刚开始为空,另一组b为全部节点,dis[i]记录从源点到i结点的距离,同样当所有操作结束后dis[i]就是到达源点的最短距离啦,每次更 ...