jQuery实现的粘性滚动导航栏效果实例【附源码下载】


Posted in jQuery onOctober 19, 2017

本文实例讲述了jQuery实现的粘性滚动导航栏效果。分享给大家供大家参考,具体如下:

粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的:

jQuery的 smint插件,也是一个导航菜单固定插件。当页滚动时,导航菜单会固定在顶部;当点击菜单时,页面会平滑的滚动到对应的区域。

兼容性

由于 smint 使用了 position: fixed,所以它不兼容 IE6。适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

引入文件

<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

HTML

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div class="wrap">
  <div class="subMenu">
    <div class="inner">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
    </div>
  </div>
  <div class="section sTop">
    <div class="inner"></div><br class="clear">
  </div>
  <div class="section s1">
    <div class="inner"><h1>Section 1</h1></div>
  </div>
  <div class="section s2">
    <div class="inner"><h1>Section 2</h1></div>
  </div>
  <div class="section s3">
    <div class="inner"><h1>Section 3</h1></div>
  </div>
  <div class="section s4">
    <div class="inner"><h1>Section 4</h1></div>
  </div>
  <div class="section s5">
    <div class="inner"><h1>Section 5</h1></div>
  </div>
</div>
</body>

注意:菜单的外部容器(如上例的 subMenu)需要设置样式 position:absolute,并且每个菜单的 a 标签需要设置 id,id 的值与下面对应区域的 class 的值一致。

JavaScript

$(function() {
  $('.subMenu').smint({
    scrollSpeed : 1000
  });
});

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
js css自定义分页效果
2017/02/24 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python中reload(module)的用法示例详解
2017/09/15 Python
简单了解python代码优化小技巧
2019/07/08 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python同时迭代多个序列的方法
2020/07/28 Python
python3跳出一个循环的实例操作
2020/08/18 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
银行出纳岗位职责
2013/11/25 职场文书
《学会待客》教学反思
2014/02/22 职场文书
《掌声》教学反思
2014/02/23 职场文书
搞笑婚前保证书
2015/02/28 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
python对文档中元素删除,替换操作
2022/04/02 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android