要实现如下效果,鼠标滚动后,上方导航栏置顶固定

关键html代码:

  1. <div class="header-bottom">
  2. <div class="container">
  3. <div class="logo">
  4. <a href="home"><img src="static/web/images/logo.png" alt="远地资产 " /></a>
  5. </div>
  6. <div class="top-nav">
  7. <span class="menu"> </span>
  8. <ul>
  9. <li><a href="home" class="scroll" >首页</a></li>
  10. <li><a href="about" class="scroll">关于我们</a></li>
  11. <li><a href="services" class="scroll">服务领域</a></li>
  12. <li><a href="project" class="scroll">业务案例</a></li>
  13. <li><a href="references" class="scroll">合作伙伴</a></li>
  14. <li><a href="activities" class="scroll">官方活动</a></li>
  15. <li><a href="news" class="scroll">新闻资讯</a></li>
  16. <li><a href="contact" class="scroll">联系我们</a></li>
  17. </ul>
  18. </div>
  19. <div class="clearfix"> </div>
  20. </div>
  21. </div>

关键CSS代码:

  1. .fixed {
  2. position: fixed;
  3. top: 0;
  4. width: 100%;
  5. margin: 0 auto;
  6. left: 0;
  7. border-bottom: 2px solid #113f6c;
  8. z-index: 10000;
  9. }

关键jquery代码:

    1. <script>
    2. $(document).ready(function() {
    3. var navOffset=$(".header-bottom").offset().top;
    4. $(window).scroll(function(){
    5. var scrollPos=$(window).scrollTop();
    6. if(scrollPos >=navOffset){
    7. $(".header-bottom").addClass("fixed");
    8. }else{
    9. $(".header-bottom").removeClass("fixed");
    10. }
    11. });
    12. });
    13. </script>

如何用jQuery实现在鼠标滚动后导航栏保持固定的更多相关文章

  1. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  2. jquery datatable设置垂直滚动后,表头(th)错位问题

    jquery datatable设置垂直滚动后,表头(th)错位问题 问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...

  3. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  4. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  5. iOS解决隐藏导航栏后,打开照片选择器后导航栏不显示的问题以及更换导航栏背景色

    问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...

  6. jQuery系列(七):导航栏实例

    上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 关于如何用Jquery监听鼠标滚轮改变横向滚动条

    $(function(){ if ((navigator.userAgent.indexOf('MSIE') >= 0)){/*判断是否是IE浏览器*/ var scroll_width = 1 ...

  8. QTableView 固定列宽度(鼠标拖动后,仍可固定)

    QTableView 提供一个函数: void QTableView::setColumnWidth ( int column, int width ) 用于设置column指定的列的宽度 但setC ...

  9. jQuery实现鼠标滑过导航栏呈现不同的样式

    素材图片 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. hdu 1403 Longest Common Substring(最长公共子字符串)(后缀数组)

    http://acm.hdu.edu.cn/showproblem.php?pid=1403 Longest Common Substring Time Limit: 8000/4000 MS (Ja ...

  2. ConfigParser读取记事本、notepad++修改后的配置文件会出现:ConfigParser.MissingSectionHeaderError

    使用ConfigParser来读取配置文件,经常会发现经过记事本.notepad++修改后的配置文件读取时出现下面的问题: ConfigParser.MissingSectionHeaderError ...

  3. Lua 笔记

    lua命令: #enter shell lua #excute script file lua xxx.lua lua脚本: #!/usr/local/bin/lua 核心概念: As a exten ...

  4. http://blog.csdn.net/zhang_xinxiu/article/details/38655311

    一.Activiti下载及简介 1.1.Activiti下载 官网下载地址:http://activiti.org/download.html        Note:下载时不一定要使用最新版本的,最 ...

  5. c++ const char *c_str(); 坑的学习

    语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过st ...

  6. jquery checkbox获取多个选项

    http://www.jb51.net/article/27186.htm http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.htm ...

  7. 应付发票审批 Hold and Release Names

    (N) AP > Setup > Invoice > Hold and Release Names 这里一般默认就可以了.Use the Invoice Hold and Relea ...

  8. hadoop2.2原理:采样器

    多输入路径-只采一个文件-(MultipleInputs+getsample(conf.getInputFormat) 之前弄采样器,以为已经结束了工作,结果现在又遇到了问题,因为我的输入有两个文件, ...

  9. 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 ...

  10. UIButton图片与文字位置调整

    1:左图右文 默认效果就行 2:左文右图 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn addTarget:se ...