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标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...
随机推荐
- IPython notebook 使用介绍
参考资料: http://mindonmind.github.io/2013/02/08/ipython-notebook-interactive-computing-new-era/ http:// ...
- JNI Java调用C代码 示例
Activity public class MainActivity extends ListActivity { static { System.loadLibrary(&q ...
- 富文本 SpannableString Span
经典使用场景 SpannableStringBuilder needStartSSB = new SpannableStringBuilder("需要"); SpannableSt ...
- Html.RenderPartial和Html.RenderAction的区别
添加一个PartialController控制器 using System; using System.Collections.Generic; using System.Linq; using Sy ...
- 织梦DEDECMS {dede:field name='position'/}标签增加其它属性的
在默认情况下,织梦(DedeCms)系统当前位置的调用标签为: {dede:field name='position'/} 在这种默认的情况下,生成后的代码大致为如下格式: 主页 > 应用软件 ...
- git some cookies
*首先得配置和本地的操作实际上都很简单,忽略了:*git 添加远程仓库 git remote add 仓库名 url:*先pull下来,语法 git pull 远程仓库名 远程分支名[:当地分支名], ...
- 各版本IIS安装方法
各版本IIS安装方法 Windows 2000 V5.0 将操作系统安装光盘放入光驱,打开“控制面板”→“添加或删除程序”→“添加/删除 Windows 组件”,勾选“Internet信息服务(I ...
- 在java代码中显示json字符串(怎么避免json字符串中双引号在java代码中显示)
String log = "eyJvcmRlckluZm8iOnsiaWQiOjEwNzQwNCwib3JkZXJJZCI6MjczNjQyMSwicHJvZHVjdENvZGUiOjQ1N ...
- 武汉科技大学ACM:1007: 陶陶摘苹果
Problem Description 厘米高的板凳,当她不能直接用手摘到苹果的时候,就会踩到板凳上再试试. 个苹果到地面的高度,以及陶陶把手伸直的时候能够达到的最大高度,请帮陶陶算一下她能够摘到的苹 ...
- 配置CAS错误No Certificate file specified or invalid file format
配置tomcat证书 keystore文件后启动一直报错:(tomcat版本:apache-tomcat-6.0.43) tomcat配置: <Connector port="8443 ...