1

I'm new to JavaScript, i seem to have got myself in a tricky situation. Currently i have some code which below 200px adds a class to make the navbar sticky. The code which have added can be found below.

  function navbarCollapse () {    
    if ($("#mainNav").offset().top > 200) {
      $("#mainNav").addClass("navbar-shrink");
      $("#mainNav").removeClass("navbar-font");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
      $("#mainNav").addClass("navbar-font");
    }
  }

  //Execute The Collapsing Navbar Function
  navbarCollapse();

//Scroll Event
  $(window).scroll(navbarCollapse);

The problem I'm facing is 200px on one device is completely different on another device such as a large monitor

I need to be able to calculate the height of a devices view-port, and then execute the code accordingly.

Any help would greatly be appreciated. Like i said I'm new to JavaScript and I'm probably missing something simple.

Alex Machin
  • 31
  • 2
  • 10
  • Have you reviewed this post? https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll/19144107#19144107 – SoEzPz Apr 05 '18 at 16:40
  • Use innerHeight() of a div placed behind the sticky bar which is the correct height, or just of the bar in this case I think – Sammaye Apr 05 '18 at 16:41
  • Can you post the full .html file with this? –  Apr 05 '18 at 16:43
  • 1
    ah ok @SoEzPz instead of a static number its dynamic. Thanks ill be sure to look this over after I've documented the rest of my site. – Alex Machin Apr 05 '18 at 16:48
  • Hey @RyanB im using EJS but this is what ive got https://github.com/AlexMachin1997/Portfolio/blob/master/ASSETS/Source/Views/Partials/Menu.ejs – Alex Machin Apr 05 '18 at 16:49

1 Answers1

0

Instead of making an offset like this add a class that uses css and do your calculations there. 

.nav-offset {
    Top: 1%;
}
Sean Ward
  • 1