jQuery实现的粘性滚动导航栏效果实例【附源码下载】

更新时间：2017年10月19日 12:04:18 作者：寒意

这篇文章主要介绍了jQuery实现的粘性滚动导航栏效果,涉及jQuery插件smint的相关使用技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jquery实现无限分级横向导航菜单的方法
这篇文章主要介绍了jquery实现无限分级横向导航菜单的方法,实例分析了基于jQuery插件操作html与对应样式实现导航菜单效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jQuery中before()方法用法实例
这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery实现的选择商品飞入文本框动画效果完整实例
这篇文章主要介绍了jQuery实现的选择商品飞入文本框动画效果,结合完整实例形式分析了jQuery动态操作页面元素属性实现动画效果的方法,涉及jQuery的事件绑定、元素遍历及属性操作等相关技巧,需要的朋友可以参考下
2016-08-08
jquery实现checkbox 全选/全不选的通用写法
本篇文章主要是对jquery实现checkbox 全选/全不选的通用写法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
页面刷新时记住滚动条的位置jquery代码
这篇文章主要介绍了点击按钮页面刷新的时候记住滚动条的位置,需要的朋友可以参考下
2014-06-06
jQuery中阻止冒泡事件的方法介绍
这篇文章主要介绍了jQuery中阻止冒泡事件的方法介绍,需要的朋友可以参考下
2014-04-04
认识jQuery的Promise的具体使用方法
本篇文章主要介绍了认识jQuery的Promise的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
7款风格新颖的jQuery/CSS3菜单导航分享
下面给大家分享7款风格新颖的jQuery/CSS3菜单导航让用户方便地找到想要的信息，而且更让人有一种特殊的用户体验，希望大家会喜欢
2013-04-04
jQuery与Ajax以及序列化
本文给大家介绍jQuery与Ajax以及序列化，涉及到ajax的优势，ajax的不足，序列化相关知识，本文介绍的非常详细，具有参考借鉴价值感兴趣的朋友一起学习吧
2016-02-02
jquery数组封装使用方法分享(jquery数组遍历)
JQuery对数组的处理非常便捷并且功能强大齐全，一步到位的封装了很多原生js数组不能企及的功能。下面来看看JQuery数组的强大之处在哪。
2014-03-03

jQuery实现的粘性滚动导航栏效果实例【附源码下载】

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具