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 相关文章推荐
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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代码(星期六,星期日总和)
2009/11/12 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php中return的用法实例分析
2015/02/28 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
javascript如何创建对象
2016/08/29 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python 文件重命名工具代码
2009/07/26 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
PHP面试题大全
2015/10/16 面试题
linux下进程间通信的方式
2013/01/23 面试题
经管应届生求职信
2013/11/17 职场文书
自荐书格式
2013/12/01 职场文书
班主任先进事迹材料
2014/12/17 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js