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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
使用jquery实现轮播图效果
Jan 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开发入门教程之面向对象
2006/12/05 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python实现红包裂变算法
2016/02/16 Python
Python操作csv文件实例详解
2017/07/31 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Linux文件系统类型
2012/02/15 面试题
建议书怎么写
2014/03/12 职场文书
西式婚礼主持词
2014/03/13 职场文书
百日安全活动总结
2014/05/04 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
走进毛泽东观后感
2015/06/04 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL