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中map函数的两种方式
Apr 07 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
如何在vue 中引入使用jquery
Nov 10 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 MYSQL 数据备份类
2009/06/19 PHP
php 类自动载入的方法
2015/06/03 PHP
php身份证号码检查类实例
2015/06/18 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python实现感知器算法(批处理)
2019/01/18 Python
django框架使用方法详解
2019/07/18 Python
详解Python3 pickle模块用法
2019/09/16 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android