place a will-be sticky nav in html

Question

My target is to show the banner picture first then the navigation menu, and while the <nav> is scrolled to the top of the screen it sticks there on the top. Also, the site-logo, overlapping with the banner picture first, will appear on the nav bar when <nav> is scrolled and sticks on top.

My question is where to place the nav section in html. Should it be moved to the header section? (In this case, what's the best way to originally position it in css for there is a picture element having several responsive img source tags?) Or should it just stays where it is now, and let the header section to be removed or to wrap the nav?

<body>
  <header>

     .....
  </header>

  <div role="banner">
    <picture>
    </picture>
    <div role="site-logo"></div>
  </div>

  <nav role="navigation menu">
    <ul>
    </ul>
  </nav>
</body>

You will be needing javascript or jquery to calculate the scroll before sticking the `nav`. It would be easy if the `nav` is in the topmost and is already sticked — Carl Binalla, Apr 03 '17 at 02:02

score 0 · Answer 1 · edited May 23 '17 at 12:17

From here

CSS

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

JQUERY

$(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('nav').addClass('navbar-fixed');
    }

    if ($(window).scrollTop() < 551) {
      $('nav').removeClass('navbar-fixed');
    }
  });
});

place a will-be sticky nav in html

1 Answers1