js让菜单栏一直悬浮在顶部,经典代码
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即可
eg:
//菜单栏始终浮动在顶部
var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".trade-tab-bot").css({"position":"fixed","top":0,"left":0, "z-index":1000, "margin":"0 auto", "width":"100%"});
}else if(scroH<navH){
$(".trade-tab-bot").css({"position":"relative","margin":"0 auto"});
}
console.log(scroH==navH);
});
js让菜单栏一直悬浮在顶部,经典代码的更多相关文章
- JS 菜单栏一直悬浮在顶部代码
只需要把下面代码放到js中: $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".menu&quo ...
- 网站JS控制的QQ悬浮
这是一个网站JS控制的QQ悬浮客服:代码1document.writeln("<div id=\"feedback\"><div id=\"f ...
- 菜单栏始终浮动在顶部 js
//菜单栏始终浮动在顶部var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离//滚动条事件$(window ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- JS实现复制网页内容自动加入版权内容代码和原文链接
JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...
- Js设置所有连接是触发/swt/的代码
Js设置所有连接是触发/swt/的代码 代码为: <script> var doca=document.getElementsByTagName('a'); for(var i=0;i&l ...
- 一段JS控制TD中图片的大小的代码
一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- js正则实现从一段复杂html代码字符串中匹配并处理特定信息
js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...
随机推荐
- Android - Ashmem驱动
以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...
- solr error logs org.apache.solr.common.SolrException: ERROR: [doc=17] unknown field alias
在solr中 添加新的索引词语时,报如标题所示错误,指定是插入的字段没有在solr索引字段里 可以修改 solr安装目录/solr/conf 目录下的 schema.xml 在此xml文件内加入所需字 ...
- css08盒子模型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- C# - openxml 操作excel - '“System.IO.Packaging.Package”在未被引用的程序集中定义'
在 CodeProject中,有位网友写的一篇基于OpenXML SDK 2.0对excel(大数据量)进行操作,其中,运行的时候,有如下错误: 类型“System.IO.Packaging.Pack ...
- nexus 的使用及maven的配置
一.nexus的安装 1.下载nexus(点解这里) 2.下载后解压文件,将解压后的nexus文件放在你自己想要的地方 3.配置环境变量(和配置java的环境变量一样) 4.安装和启动nexus 由于 ...
- PHP XML DOM
PHP XML DOM 内建的 DOM 解析器使在 PHP 中处理 XML 文档成为可能. DOM 是什么? W3C DOM 提供了针对 HTML 和 XML 文档的标准对象集,以及用于访问和操作这些 ...
- access 2007 vba (亖)
OpenReport方法执行 OpenReport 操作在 Visual Basic 中. 语法 表达式 .OpenReport(ReportName, View, FilterName, Whe ...
- 【推荐】Java工程师如何从普通成为大神值得一读
本文源自 http://www.hollischuang.com/archives/489 一点感悟 java作为一门编程语言,在各类编程语言中作为弄潮儿始终排在前三的位置,这充分肯定了java语言的 ...
- Java学习笔记——SequenceInputStream类合并文件的综合举例分析
SequenceInputStream 介绍 SequenceInputStream 类表示其他输入流的逻辑串联,即文件的合并. 它从输入流的有序集合开始,并从第一个输入流开始读取,直到到达文件末尾, ...
- DoingOrder.aspx.cs缓存的使用方法
using System; using System.Web.UI; using System.Data; using System.Text; using BLL = SmartWaterSys.B ...