This time I will share jQuery Plugin and tutorial about jQuery Plugin For Fixed Bootstrap 4 Nav With Smooth Scroll – navbar-fixed.js, hope it will help you in programming stack.
| File Size: | 4.94 KB |
|---|---|
| Views Total: | 26841 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
navbar-fixed.js is a very small jQuery plugin used to extend the default fixed Bootstrap navbar component with scrollspy and smooth scroll support.
How to use it:
1. Add Bootstrap to your web project using the Bootstrap CDN:
|
1 2 3 4 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/jquery.slim.min.js"></script> <script src="/path/to//tether.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> |
2. Add the following JavaScript and CSS files to your Bootstrap project.
|
1 2 |
<link rel="stylesheet" href="navbar-fixed.css"> <script src="navbar-fixed.js"></script> |
3. Create a fixed top navbar containing anchor links:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<nav class="navbar navbar-toggleable-sm fixed-top bg-primary navbar-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </div> </nav> |
3. Create your own sectioned content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container-fluid section bg-primary" style="height: 50%;" id="about"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Navbar-<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>er</h1> <p>For Fixed Nav with <a href="https://www.jqueryscript.net/tags.php?/bootstrap 4/">Bootstrap 4</a> Alpha 6</p> </div> </div> </div> </div> <div class="container-fluid section" style="height: 50%;" id="section1"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Example Section 1</h1> </div> </div> </div> </div> <div class="container-fluid section" style="height: 50%; background-color: #fefefe" id="section2"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Example Section 2</h1> </div> </div> </div> </div> <div class="container-fluid section" style="height: 100%;" id="section3"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Example Section 3</h1> </div> </div> </div> </div> |
Change log:
2017-04-18
- added exception to trigger last section if it is <100% of window size
This awesome jQuery plugin is developed by ts-de. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
