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:/ ...
随机推荐
- Ajax跨域问题
为了数据安全,默认情况下ajax请求是不支持跨域访问. 但是可以通过以下方法让ajax接收跨域API地址 第一种:JSONP比较老,较简单的请求可以考虑使用. JS代码 $(function () { ...
- mysql--1130ERROR
问题一:mysql 用户登录不用验证密码(用户已设密码) 安装好mysql 后,我发现我设立了密码,同样可以不用密码就能登陆 cmd>mysql cmd>select current_us ...
- webpack +vue开发(1)
首先安装 node.js这是毋庸置疑的,安装完了之后安装webpack npm install webpack -g 接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.h ...
- 树莓派 自身摄像头的opencv调用
之前写过一篇随笔关于树莓派3上摄像头的调用,使用的方式是安装v4l2驱动. 实际上有一种更加简单的方法. 树莓派中的camera module是放在/boot/目录下以固件的形式加载的,不是一个标准的 ...
- Socket的三个功能类TCPClient、TCPListener 和 UDPClient (转)
应用程序可以通过 TCPClient.TCPListener 和 UDPClient 类使用传输控制协议 (TCP) 和用户数据文报协议 (UDP) 服务.这些协议类建立在 System.Net.So ...
- 玩转单元测试之DBUnit
DBunit 是一种扩展于JUnit的数据库驱动测试框架,它使数据库在测试过程之间处于一种已知状态,如果一个测试用例对数据库造成了破坏性影响,它可以帮助避免造成后面的测试失败或者给出错误结果. 虽然不 ...
- 母版页的 page_load事件执行两次
定义了一个母版页 Admin.master 部分代码如下 <body onload="LoadHight()"> <div> <!--公共的头部开始 ...
- Distributed Transaction Coordinator 无法启动
有时候我们需要进行COM应用程序的权限设置,控制面板-->管理工具-->组件服务-->然后依此展开:组件服务-->计算机-->我的电脑-->DCOM 配置,接下来找 ...
- jsp动作标签概述
*Jsp动作标签概述: >动作标签的作用是用来简化java脚本 >jsp动作标签是JavaWeb内置的动作标签,它们是已经定义好的动作标签,我们可以拿来直接使用. >JavaWeb一 ...
- CentOS6.5下安装apache2.2和PHP 5.5.28
CentOS6.5下安装apache2.2 1. 准备程序 :httpd-2.2.27.tar.gz 下载地址:http://httpd.apache.org/download.cgi#apache2 ...