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 numpy函数hstack() vstack() stack() dstack() vsplit() concatenate()
感觉numpy.hstack()和numpy.column_stack()函数略有相似,numpy.vstack()与numpy.row_stack()函数也是挺像的. stackoverflow上也 ...
- Sedgewick的红黑树
红黑树一直是数据结构中的难点,大部分关于算法与数据结构的学习资料(包括<算法导论>)对于这部分的讲解都是上来就下定义,告诉我们红黑树这个性质那个性质,插入删除要注意1234点,但是基本没有 ...
- 8、java继承中的this和super的应用
java中只支持单继承,这是为了防止继承的父类中出现同样的函数不知道调用哪个好.虽然java只支持单继承但是有多实现来补偿. 子父类出现后,类成员的特点: 类中成员:1,变量.2,函数.3,构造函数. ...
- Silverlight管理系统源码(用于开发ERP、OA、CRM、HR、进销存、财务等系统之用)
Silverlight大型管理系统源代码(支持创建ERP.OA.CRM.HR.进销存.财务等系统之用) 可用于开发以下系统 SilverlightERP SilverlightCRM Silverli ...
- Linux系统性能和使用活动监控工具 sysstat
Sysstat是一个非常方便的工具,它带有众多的系统资源监控工具,用于监控系统的性能和使用情况.我们在日常使用的工具中有相当一部分是来自sysstat工具包的.同时,它还提供了一种使用cron表达式来 ...
- python学习-day18、文件处理、
4.文件操作 武sir:http://www.cnblogs.com/wupeiqi/articles/4943406.html 林海峰:http://www.cnblogs.com/linhaife ...
- 黄聪:wordpress向一个页面POST数据,出现404页面访问不了
出现这个情况,说明POST的数据中存在一些关键词,触发调用了page以外的模版.比如POST数据中有 name , author 等参数. 解决办法,就是把这些参数改一下名称.
- sql server 2008 r2 报错
无法启动服务,要求检查数据库和windows日志 查看发现报错 The SQL Server failed to initialize VIA support library [QLVipl.dll] ...
- bootstrap-图文混排 media
<!-- media 图文混排 media-left(right) 图片的区域 在左边显示(右边) media-body 内容区域 media-heading 内容区域里的标题 media-mi ...
- Blackfin DSP(七):用SPORT口模拟SPI
1.问题的提出 当系统从SPI device启动时,若SCLK = 133M,则SPI的最大速度为33M.然而,有一些串行的flash设备能更快的运行,因此,如果我们使用SPORT口,它的最大速度为S ...