如何用jQuery实现在鼠标滚动后导航栏保持固定
要实现如下效果,鼠标滚动后,上方导航栏置顶固定
关键html代码:
- <div class="header-bottom">
- <div class="container">
- <div class="logo">
- <a href="home"><img src="static/web/images/logo.png" alt="远地资产 " /></a>
- </div>
- <div class="top-nav">
- <span class="menu"> </span>
- <ul>
- <li><a href="home" class="scroll" >首页</a></li>
- <li><a href="about" class="scroll">关于我们</a></li>
- <li><a href="services" class="scroll">服务领域</a></li>
- <li><a href="project" class="scroll">业务案例</a></li>
- <li><a href="references" class="scroll">合作伙伴</a></li>
- <li><a href="activities" class="scroll">官方活动</a></li>
- <li><a href="news" class="scroll">新闻资讯</a></li>
- <li><a href="contact" class="scroll">联系我们</a></li>
- </ul>
- </div>
- <div class="clearfix"> </div>
- </div>
- </div>
关键CSS代码:
- .fixed {
- position: fixed;
- top: 0;
- width: 100%;
- margin: 0 auto;
- left: 0;
- border-bottom: 2px solid #113f6c;
- z-index: 10000;
- }
关键jquery代码:
- <script>
- $(document).ready(function() {
- var navOffset=$(".header-bottom").offset().top;
- $(window).scroll(function(){
- var scrollPos=$(window).scrollTop();
- if(scrollPos >=navOffset){
- $(".header-bottom").addClass("fixed");
- }else{
- $(".header-bottom").removeClass("fixed");
- }
- });
- });
- </script>
如何用jQuery实现在鼠标滚动后导航栏保持固定的更多相关文章
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- jquery datatable设置垂直滚动后,表头(th)错位问题
jquery datatable设置垂直滚动后,表头(th)错位问题 问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 【方法】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- iOS解决隐藏导航栏后,打开照片选择器后导航栏不显示的问题以及更换导航栏背景色
问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...
- jQuery系列(七):导航栏实例
上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 关于如何用Jquery监听鼠标滚轮改变横向滚动条
$(function(){ if ((navigator.userAgent.indexOf('MSIE') >= 0)){/*判断是否是IE浏览器*/ var scroll_width = 1 ...
- QTableView 固定列宽度(鼠标拖动后,仍可固定)
QTableView 提供一个函数: void QTableView::setColumnWidth ( int column, int width ) 用于设置column指定的列的宽度 但setC ...
- jQuery实现鼠标滑过导航栏呈现不同的样式
素材图片 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
随机推荐
- hdu 1403 Longest Common Substring(最长公共子字符串)(后缀数组)
http://acm.hdu.edu.cn/showproblem.php?pid=1403 Longest Common Substring Time Limit: 8000/4000 MS (Ja ...
- ConfigParser读取记事本、notepad++修改后的配置文件会出现:ConfigParser.MissingSectionHeaderError
使用ConfigParser来读取配置文件,经常会发现经过记事本.notepad++修改后的配置文件读取时出现下面的问题: ConfigParser.MissingSectionHeaderError ...
- Lua 笔记
lua命令: #enter shell lua #excute script file lua xxx.lua lua脚本: #!/usr/local/bin/lua 核心概念: As a exten ...
- http://blog.csdn.net/zhang_xinxiu/article/details/38655311
一.Activiti下载及简介 1.1.Activiti下载 官网下载地址:http://activiti.org/download.html Note:下载时不一定要使用最新版本的,最 ...
- c++ const char *c_str(); 坑的学习
语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过st ...
- jquery checkbox获取多个选项
http://www.jb51.net/article/27186.htm http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.htm ...
- 应付发票审批 Hold and Release Names
(N) AP > Setup > Invoice > Hold and Release Names 这里一般默认就可以了.Use the Invoice Hold and Relea ...
- hadoop2.2原理:采样器
多输入路径-只采一个文件-(MultipleInputs+getsample(conf.getInputFormat) 之前弄采样器,以为已经结束了工作,结果现在又遇到了问题,因为我的输入有两个文件, ...
- xfce terminal tab被解释为super+tab的bug
https://bugzilla.xfce.org/show_bug.cgi?id=10760 解决方法 Every few weeks the tab key stops working in th ...
- UIButton图片与文字位置调整
1:左图右文 默认效果就行 2:左文右图 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn addTarget:se ...