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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
详解jQuery-each()方法
Mar 13 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 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 前一天或后一天的日期
2008/06/28 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
js 分栏效果实现代码
2009/08/29 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python聊天室实例程序分享
2016/01/05 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
浅析Python 责任链设计模式
2020/09/11 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
经济系大学生求职信
2013/10/01 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
什么是SOLID
2022/03/24 Javascript
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python