Installation

Download Zip from github, extract it and look for NavOnScroll.min.js inside "dist" Folder. Copy it to your project folder. If you prefer to put plugins like root/assets/js/plugin.js and index.html lies in root, then below is the example of script include. Placing it just above </body> tag would work well.

<script src="assets/js/navonscroll.min.js"></script>

As soon as I am done with all publishing work, my first priority would be to get cdn link. But above mentioned approach should work just fine.

Usage

Designed to be easy to use, it does most of the heavy lifting behind the scenes and exposes a simple api to interact with the dom.

• Get your Navbar Markup ready with "id" attribute. For the purpose of demonstration i am using bootstrap (it would charmly work on any horizontal navigation)

<!--==================== Declare Navbar with ID ====================-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="demo1Navbar">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"     aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    </ul>
  </div>
</nav>

• Once the HTML markup is ready with "id" attribute (here id is "demo1Navbar"), go ahead and include navonscroll.min.js script file.

    <!--================ NavOnScroll Plugin ================-->
    <script src="assets/js/navonscroll.min.js"></script>
  </body>

• Finally, make function call with required parameters, the most important is navigation id("demo1Navbar") for this eaxmple. Other parameters has some defaults set for you, if you want to get started real quick.

   <!--================ NavOnScroll Plugin ================-->
    <script src="navonscroll.min.js"></script>
    <!-- Function Call --> 
    <script>
      hide_on_scroll({
        nav_id : 'demo1Navbar'
      });
    </script>
  </body>

  Yup! That was it. There you go with a beautiful on scroll animating Navbar. Pretty simple, isn't it! Notice that, we didnot add any CSS, plugin took care of it. Also it has all performance optimizations done too :) Stay here and read on to know how to configure navgiation for mobile devices, bottom navigation or setting vertical offset.
  

  Note : As you noticed, navigation got popped up a bit and due to this elements below it got pushed up a little. I know that can be painful :( Simple fix is to manually add padding top to element below navigation with value slightly greater than navigation height.

Configuration

Done with Installation & Usage ? Let us jump in real easy and powerful configurations (function parameters) to have more control over onscroll behaviour of navbar.

I am listing all Parameters of hide_on_scroll() with default values below :

// hide_on_scroll function with DEFAULT parameter VALUES
hide_on_scroll({
  nav_id               : '',      // you must specify this for plugin to work
  nav_offset           : 200,     // after how much y-scroll, nav should hide onscroll down
  nav_position         : 'top',   // you want to see nav bar at 'top' or 'bottom', default 'top'
  hide_onscroll_mobile : false,   // disables hide-onscroll for mobile, you can set it to true
  mobile_width         : 576      // viewport width below which it disables hide-onscroll if above is false
});

To get more clear idea on how to use this parameters, checkout Demos. In total i have prepared 9 Demos for you. It includes examples of Bootstrap, Semantic-UI and Custom Navbar. I have applied customizations for mobile in various demos. I highly recommend you to checkout those.

Examples

Bootstrap Based Navigation Examples :

Semantic UI Based Navigation Examples :

Custom Navigation Examples :

MIT License

MIT License

Copyright (c) 2019 Krupesh M. Anadkat

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

It wouldbe appreciable if you include the above License and Attribution in your project as one of those meta data file. Free for use in Commercial and Personal project with Attribution.