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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
如何基于jQuery实现五角星评分
Sep 02 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+DBM的同学录程序(4)
2006/10/09 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
JavaScript静态的动态
2006/09/18 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue使用websocket的方法实例分析
2019/06/22 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python两个list[]相加的实现方法
2020/09/23 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
AJAX的全称是什么
2012/11/06 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
小学体育教学反思
2014/01/31 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
培训协议书范本
2014/04/22 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
趣味运动会赞词
2015/07/22 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技