Skip to main content
U
Under S.
Inspiring
April 13, 2017
Answered

Best method to stick a scrolling navbar to the top, and slide open a within-the-flow menu on click?

  • April 13, 2017
  • 3 replies
  • 1721 views

Greetings!

As a designer/coder (in that order) I'm rather excited to be nearing the completion of my first site in years. The help I've received from this forum's usual suspects made connecting the dots between the old methods and the new ones easier than they should've been.

The two items on my plate today are :

  1. Making a (horizontal, middle-of-the-screen) navbar stick to the top of the page once it's scrolled its way up there.
  2. When clicking "Menu" button, slide open a menu (either a vertical one that opens from the left side, pushing the rest of the design to the right -- or a horizontal one that opens under the navbar, filling 100% width and pushing the rest of the design lower down).

As usual when Googling these subjects, the returns are all over the place (many of them relying on technology that has since been made obsolete by newer tech) so I feel safer coming here and asking the pros what avenues or scripts they recommend taking in 2017 for these two missions.

Thanks!

    This topic has been closed for replies.
    Correct answer osgood_

    https://forums.adobe.com/people/Under+S.  wrote

    Whats above the navigation, a logo or something in a container?

    A large header DIV containing 3 other DIVs (it's 100% wide and 400px tall). The navbar is just another DIV located right after it in the flow. The navbar is 100% wide as well, and about 80px high.

    All you would need to use then is  the below jquery and css

    Change '.header' to the class or id name of your <div>  containing the 3 other <divs> and change the 2 instances of .main_navigation to the class or id name of your navbar <div> (you need to include the period infront of the name or # if its an id as the example below shows)

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(document).ready(function() {

    var fixit = "fixit";

    var height = $('.header').height();

    $(window).scroll(function() {

    if ($(this).scrollTop() > height) {

    $(".main_navigation").addClass(fixit);

    } else {

    $(".main_navigation").removeClass(fixit);

    }

    });

    });

    </script>

    Then add the below to your css:

    .fixit {

    position: fixed;

    top: 0;

    }

    3 replies

    U
    Under S.Author
    Inspiring
    April 13, 2017

    I should probably share the .html and .body classes, though. In case something in them might cause a problem for one of the proposed solutions. These are mostly failsafes that have served me well over time.

    html, body  {

        background-size: 100% 100%;

    }

    body {

        width: 100%;

        height: 100%;

        text-align: left;

        font-size: 13pt;

        line-height: 1.5em;

        margin: 0; padding: 0;

        overflow-x: hidden;

    }

    O
    osgood_
    Legend
    April 13, 2017

    Whats above the navigation, a logo or something in a container?

    If you can post some code someone will be able to provide you with a dedicated solution according to what you have used to build the site, framework or no framework etc

    Below is the solution I use for a 'sticky navbar':

    <!DOCTYPE html>

    <html>

    <head>

    <title>Sticky Navbar</title>

    <style>

    body {

    margin: 0;

    }

    .fixit {

    position: fixed;

    top: 0;

    }

    .main_navigation {

    background-color: #000;

    width: 100%;

    color: #fff;

    }

    .main_navigation h3 {

    margin: 0;

    padding: 25px;

    }

    header, .content {

    width: 85%;

    margin: 0 auto;

    }

    </style>

    </head>

    <body>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(document).ready(function() {

    var fixit = "fixit";

    var height = $('header').height();

    $(window).scroll(function() {

    if ($(this).scrollTop() > height) {

    $(".main_navigation").addClass(fixit);

    } else {

    $(".main_navigation").removeClass(fixit);

    }

    });

    });

    </script>

    <header>

    <h1>Welcome</h1>

    </header>

    <!-- end header -->

    <nav class="main_navigation">

    <h3>Navigation goes here</h3>

    </nav>

    <!-- end nav -->

    <section class="content">

    <h2>Content</h2>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This is a line of text</p>

    <p>This si a line of text</p>

    <h4>THE END</h4>

    </section>

    <!-- end content -->

    </body>

    </html>

      U
      Under S.Author
      Inspiring
      April 13, 2017

      Whats above the navigation, a logo or something in a container?

      A large header DIV containing 3 other DIVs (it's 100% wide and 400px tall). The navbar is just another DIV located right after it in the flow. The navbar is 100% wide as well, and about 80px high.

      There is no "global wrapper" around all this, as none are needed. The header DIV is 100% wide, the navbar as well, and the 3rd and final DIV is about 800px wide centered on screen (via margin: 0 auto;)

      AREA 1 (large header div with title and bg image) 100% wide

      AREA 2 (navbar) 100% wide

      AREA 3 (text) 800px wide, centered on-screen

      So to sum up, I want 1) that navbar to stop when it hits the top, and 2) Another DIV to open beneath it (with menu items I'll add later) when someone clicks on the menu link located somewhere inside it.

      It's difficult for me to share the page itself right now since it's running in a sandbox, but I look forward to doing so when I'm ready to let you guys really analyze it. It's not going live until you guys have seen it, since just one word from one of you could save me endless headaches later.

      O
      osgood_Correct answer
      Legend
      April 13, 2017

      https://forums.adobe.com/people/Under+S.  wrote

      Whats above the navigation, a logo or something in a container?

      A large header DIV containing 3 other DIVs (it's 100% wide and 400px tall). The navbar is just another DIV located right after it in the flow. The navbar is 100% wide as well, and about 80px high.

      All you would need to use then is  the below jquery and css

      Change '.header' to the class or id name of your <div>  containing the 3 other <divs> and change the 2 instances of .main_navigation to the class or id name of your navbar <div> (you need to include the period infront of the name or # if its an id as the example below shows)

      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      <script>

      $(document).ready(function() {

      var fixit = "fixit";

      var height = $('.header').height();

      $(window).scroll(function() {

      if ($(this).scrollTop() > height) {

      $(".main_navigation").addClass(fixit);

      } else {

      $(".main_navigation").removeClass(fixit);

      }

      });

      });

      </script>

      Then add the below to your css:

      .fixit {

      position: fixed;

      top: 0;

      }

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      April 13, 2017

      What technologies/frameworks/libraries are you currently using (if any)?

      Both of those can be done pretty easily with jQuery (javascript) and examples are all over the place with plug and play instructions.

      U
      Under S.Author
      Inspiring
      April 13, 2017

      What technologies/frameworks/libraries are you currently using (if any)?

      Both of those can be done pretty easily with jQuery (javascript) and examples are all over the place with plug and play instructions.

      Pretty much reached the part in the building process where one would come in handy. Currently no libraries are linked to, because I wanted to make sure the HTML/CSS foundation was solid first (ie, that I can actually display what I want to display without any extras, before I add any extras).

      Back in the day, I'd incorporate jQuery plugin scripts with relative ease (didn't even need to fully understand most of them, just what I needed customized). Nancy recommended Bootstrap for 2017. That one scares me a little, as I don't feel I have the coding know-how to navigate that one on my own. I could be wrong, though.

      Usually, a basic jQuery script would work for me, as long as the tutorial was truly written for the uninitiated. Is that what you would suggest for me in this context? Which one, more precisely, would you recommend? Cleanest and latest code is always preferred, even if it means less than 100% compatibility (I'm willing to drop the bottom 5% that's still using 2006 tech).

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices