ng2-sticky-nav

    10.0.0 • Public • Published

    ng2-sticky-nav

    A super simple, native, Angular 2+ directive for navs (or anything) that become sticky as you scroll down.

    Installation

    To install this directive in your project, run:

    $ npm install ng2-sticky-nav --save

    Using this directive

    and then from your Angular module:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    
    // Import your library
    import { StickyNavModule } from 'ng2-sticky-nav';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
    
        // import module here
        StickyNavModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Once you have imported the module, you can use the directive like so:

    <nav class="custom-nav-class" ngStickyNav></nav>

    The div with ngStickyNav will now stick to the top once you reach its original position while scrolling down. It will also return to its original position when scrolling up.

    Important Recommendations

    Controlling height

    Since your nav will be removed from the static DOM when it sticks, I recommend setting up your html/css to account for the lost height like so:

    <!-- wrap your header in another div-->
    <div class="sticky-nav-wrapper">
      <nav class="sticky-nav" ngStickyNav></nav>
    </div>

    Corresponding css:

    :root {
      /* setting var for nav height, you can do this however you want */
      --sticky-nav-height: 40px;
    }
    
    .sticky-nav-wrapper {
      /* set min height on wrapper so that the page
         doesn't awkwardly snap and lose height */
      min-height: var(--sticky-nav-height);
    }
    
    .sticky-nav {
      height: var(--sticky-nav-height);
    
      /* other styles */
    }

    Controlling z-index

    Since your nav will be floating on top of other components, be sure that you style your nav so that its z-index is greater than the components it will go over.

    In an attempt to make this directive as simple and generic as possible, this is NOT done out of the box.

    Optional Attributes

    stickyClass

    stickyClass gives you the ability to assign a css class to your navbar when sticky. The styling will automatically be removed when the navbar is not sticky. For example, you can use this to add a box shadow to your nav when sticky like so:

    <!-- sample.component.html -->
    <div class="sticky-nav-wrapper">
      <nav class="sticky-nav" ngStickyNav stickyClass="sticky-box-shadow"></nav>
    </div>
    /* sample.component.css */
    .sticky-nav-wrapper {
      min-height: 40px;
    }
    
    .sticky-nav {
      height: 40px;
    }
    
    .sticky-box-shadow {
      box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
    }

    Now your nav will have a slight shadow when in sticky mode. This example can be useful for when your nav is the same color as the components it will be sitting on top of.

    ###stickyEnabled

    stickyEnabled gives you the ability to toggle whether the navbar should stick based on external logic.

    <nav class="custom-nav-class" ngStickyNav [stickyEnabled]="customStickyLogic"></nav>

    Note: If the condition changes, the element will only update after scrolling past it's original position. For example, if stickyEnabled is true and the user scrolls past the element, it will become sticky. If the condition changes to false, the element will remain sticky until it has returned to its original position, and subsequent scrolling will not cause the element to stick.

    /* sample.component.ts */
    
    export class sampleComponent{
    
      customStickyLogic:boolean 
      
      ngDoCheck(){
       this.customStickyLogic = this.performLogicCheck();
      }
    }

    License

    MIT © Liam Stokinger

    Keywords

    Install

    npm i ng2-sticky-nav

    DownloadsWeekly Downloads

    370

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • stokingerl
    • willyboy