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:/ ...
随机推荐
- [solr] - SolrJ增删查
使用SolrJ进行对Solr的增.删.查功能. 参考引用: http://wiki.apache.org/solr/Solrj Eclipse中新建一个项目:TestSolr 其中SorlJ的Lib包 ...
- Android总结篇系列:Activity生命周期
Android官方文档和其他不少资料都对Activity生命周期进行了详细介绍,在结合资料和项目开发过程中遇到的问题,本文将对Activity生命周期进行一次总结. Activity是由Activit ...
- MVC:上传文件时限制文件类型
之前写过一篇:MVC:上传文件 今天补充下一个功能:如何限制上传文件类型 文件类型可以在前段限制,但是太容易被绕过,最好还是在后端处理. 修改upload方法代码: [HttpPost] public ...
- Xcode取消某条警告
[Xcode取消某条警告] 像下面这样,把双引号“”内的内容替成实际的警告类型即可. #pragma clang diagnostic push #pragma clang diagnostic ...
- php rmdir使用递归函数删除非空目录
我们大家都知道,php rmdir()函数用于删除空目录,但如果要删除非空目录,我们必须将非空目录中的文件或子目录删除,本文章向大家介绍php如何使用递归函数删除非空目录,需要的朋友可以参考一下.首先 ...
- ACM好书推荐
年末感想之(渣渣的我) 仔细想想,搞比赛的日子4年有余了,确实不服老不行了,直到现在平均每天的题量都在3题左右.其实真想说,“渣渣的我”.做的题确实不少了,但是水平还是上不了档次. ...
- cocos2d-x + Lua接入iOS原生SDK的实现方案[转]
相信很多朋友在使用cocos2d-x+lua开发游戏时都遇到过接入iOS原生SDK的问题,比如常见的接应用内支付SDK,广告SDK或是一些社交平台SDK等等,我也没少接过这类SDK.这篇文章主要是对我 ...
- Excel 如何按条件计数和按条件求和(如按月求和)
1.使用SUMPRODUCT进行多条件计数语法:=SUMPRODUCT((条件1)*(条件2)*(条件3)* …(条件n))作用:统计同时满足条件1.条件2到条件n的记录的个数.实例:=SUMPROD ...
- velocity模板使用建议
复杂页面前端模块化的方式: 方式一:iframe 方式二:velocity模板(#parse) 方式一,优点很多,也有缺点,例如页面之间传递参数等: 方式二,页面之间的调用,传参更容易,页面性能更好: ...
- LeetCode344:Reverse String@Python
Write a function that takes a string as input and returns the string reversed. Example: Given s = &q ...