js让菜单栏一直悬浮在顶部,经典代码
2024-10-16 23:29:51
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);
});
最新文章
- filebeat 多行日志的处理
- fakeLoader.js-针对WebApp中的 “假”预加载
- MINIX3 进程调度分析
- Android--Intent的使用
- ButterKnife的简单使用
- 一、Android应用程序的基本原理(Fundamentals [,fʌndə&#39;mentlz])
- httpclient在抓取网页时出现速度慢的情况分析
- javascript学习代码-判断闰年
- 2014最热门、最具争议的10个Java话题
- json 和 数组的区别
- Python有哪些好用的语言翻译方法
- Python之random
- SpringBoot进阶教程(二十七)整合Redis之分布式锁
- git上传到码云
- UML和模式应用4:初始阶段(4)--需求制品之用例模型模板示例
- 4.高级js--(面向对象js)_2
- 洛谷 P1609 最小回文数 题解
- linux下每次git clone不需输入账号密码的方法
- September 28th 2017 Week 39th Thursday
- ThinkCMF框架使用 - 如何创建应用 -1
热门文章
- U1总结
- css position 应用(absolute和relative用法)
- 日期 bootsrtap-datatimepicker and bootstrap-datepicker 控件支持中文
- js 定义函数的几种方法 以及如何调用
- CentOS+nginx+uwsgi+Python 多站点环境搭建
- redis数据结构HyperLogLog
- 转:十条不错的编程观点。(出处:酷 壳 – CoolShell.cn)
- 1.1HTML的基本概念
- PHPCMS v9构建模块 - 实例之企业服务模块
- C# .NET 使用第三方类库DotNetZip解压/压缩Zip rar文件