阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.stickyNavbar.js 中文API文档

      插件 jQuery.stickyNavbar.js 中文API文档 https://github.com/jbutko/stickyNavbar.js

      stickyNavbar.js

      stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor links highlighting

      Maintainers Wanted

      Because I no longer have time to support and maintain this plugin I am looking for developer who would like to take over this project and add new functionality, solve issues etc. You can contact me through my twitter account: @jozefbutko

      1. Setup

      Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional, not working in < IE9) and stickyNavbar itself at the bottom of the page before the closing body tag:

      <!-- this goes inside the header tag-->
      <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
      <!-- all these references goes before the closing body tag-->
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
      <script src="//cdn.jsdelivr.net/npm/stickyNavbar.js@1.3.3/jquery.stickyNavbar.min.js"></script>
      

      2. HTML Markup

      Navigation:

      <div id="header" class="header">
      	 <nav id="nav">
      			 <ul class="nav navbar-nav">
      					 <li>
      						 <a href="#home">Home</a>
      					 </li>
      					 <li>
      						 <a href="#about">About</a>
      					 </li>
      					 <li>
      						 <a href="#services">Services</a>
      					 </li>
      					 <li>
      						 <a href="#contact">Contact</a>
      					 </li>
      			 </ul>
      	 </nav>
      </div>
      

      Body markup:

      <div id="home" class="scrollto">
      		<!-- Your content goes here -->
      </div>
      <div id="about" class="scrollto">
      		<!-- Your content goes here -->
      </div>
      <div id="services" class="scrollto">
      		<!-- Your content goes here -->
      </div>
      <div id="contact" class="scrollto">
      		<!-- Your content goes here -->
      </div>
      

      3. CSS:

      Add active class into your style.css and style it as you like, eg.:

      .active {
      		color: #fff !important;
      		text-decoration: underline !important;
      		-webkit-transform: translate3d(0, 0, 0);
      		-moz-transform: translate3d(0, 0, 0);
      		-o-transform: translate3d(0, 0, 0);
      		-ms-transform: translate3d(0, 0, 0);
      		transform: translate3d(0, 0, 0); // hardware acceleration of CSS animation
      }
      

      Note: You can change active class to anything you want and pass your own class into options object of stickyNavbar function. Be sure to add top: 0 to .sticky class if you want your page to be scrolled on top after each page refresh and not to vertical position presents before page refresh.

      4. jQuery:

      Call stickyNavbar function on the navigation wrapper (.header), nav tag or ul tag either without options object:

      $(function () {
      	 $('.header').stickyNavbar();
      });
      

      or with the options object:

      $(function () {
      	$('.header').stickyNavbar({
      		activeClass: "active", // Class to be added to highlight nav elements
      		sectionSelector: "scrollto", // Class of the section that is interconnected with nav links
      		animDuration: 350, // Duration of jQuery animation as well as jQuery scrolling duration
      		startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)
      		easing: "swing", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
      		animateCSS: true, // AnimateCSS effect on/off
      		animateCSSRepeat: false, // Repeat animation everytime user scrolls
      		cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector
      		jqueryEffects: false, // jQuery animation on/off
      		jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show or slideDown
      		selector: "a", // Selector to which activeClass will be added, either "a" or "li"
      		mobile: false, // If false, nav will not stick under viewport width of 480px (default) or user defined mobileWidth
      		mobileWidth: 480, // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)
      		zindex: 9999, // The zindex value to apply to the element: default 9999, other option is "auto"
      		stickyModeClass: "sticky", // Class that will be applied to 'this' in sticky mode
      		unstickyModeClass: "unsticky" // Class that will be applied to 'this' in non-sticky mode
      	});
      });
      

      5. Demo

      https://www.jozefbutko.com/stickynavbar/ or if you want to play with options: http://jsbin.com/wuluj/4/edit

      6. Credits

      jQuery
      Animate.CSS
      jQuery Easing Plugin

      Contact

      Copyright (C) 2014-2019 Jozef Butko
      www.jozefbutko.com
      www.github.com/jbutko
      @jozefbutko

      Changelog

      1.3.5

      • missing single quote fix 15/01/2019

      1.3.4

      • support for relative links in navigation links 20/10/2016

      1.3.3

      • menuItemsHref incorrect selector causes errors - pull request #45 by @dimaip
        14/04/2016

      1.3.2

      • add support for relative links
        04/10/2015

      1.3.1

      • set keyboard focus improvement - pull request #28 by @theopolisme
      • bigger resolutions check by @gyduxa
        19/07/2015

      1.3.0

      • set keyboard focus to selected section after navigation - pull request #26 by @jacktonkin
      • allow relative links - pull request #25 by @stebru
        06/06/2015

      1.2.2

      • Improve highlighting of last menu item - pull request #24 by marspe
        15/05/2015

      1.2.1

      • added npm package.json
        24/03/2015

      1.2.0

      • new scrolling logic
      • fix: conditional checking if the selector option is an ‘li’ then get the child’s href attribute - pull request #21 by @dbrw
        21/03/2015

      1.1.3

      • scrolling bug fix
        20/09/2014

      1.1.2

      • ignore external links and just let them open fix - pull request #15 by @Globegitter
        25/07/2014

      1.1.1

      • just a readme file update
        23/07/2014

      1.1.0

      • stickyMode/unstickyMode class added
      • custom mobileWidth for turning off stickyNavbar
      • window.outerWidth(true) changed to window.width() according to jQuery docs
      • optional z-index setting
      • added animation duration and easing for scrolling
      • bottomAnimation option removed (unstable behaviour)
      • navOffset option removed (unstable behaviour)
      • credits for feature requests/points: @Phyxion, @oniric85, @coolboy4598
        23/07/2014

      1.0.5

      • animateCSSRepeat Fix
      • Inaccurate scrolling fix
        22.05.2014

      1.0.4

      • Fix of the overlapped content by nav container after first click
      • Version number fix to 1.0.4
        10.04.2013

      1.0.3

      • Flickering of CSS animation fix
        13.03.2014

      1.0.2

      • Manifest update
        09.03.2014

      1.0.1

      • stickyNavbar.js.jquery.json update
        09.03.2014

      1.0.0

      • stickyNavbar.js.jquery.json update
        09.03.2014
      目录
      目录