Skip to main content
Inspiring
March 22, 2019
Answered

Is this still the simplest and/or most elegant way to lower a condensed navbar into view when user scrolls down?

  • March 22, 2019
  • 1 reply
  • 582 views

Method I'm looking at here.

This is straight-up javascript that even a non-coder like myself can figure out and customize.

Before I plug this in, anyone recommend something else? Perhaps something that requires EVEN LESS code, if I'm already using jQuery? Or is this something even you superheroes would use?

Thanks!

This topic has been closed for replies.
Correct answer osgood_

Position sticky is not supported in all browsers currently  - according to 'can I use' website it only has a 90% support globally.

At the moment l would personally  use a solution which currently has a wider browser support.

However if  you want to see it in use just go to the w3c schools website examples (search Google - w3c schools sticky). You dont need to use a massive framework to introduce a minor inclusion whether you choose to use sticky or fixed.

Only use Bootstrap solutions if you already use Bootstrap but as you have previously stated in other threads using more code than is strictly necessary is not a workflow which you feel comfortable with. l cant imagine Bootstrap would be an option if you take into consideration the extra html mark-up Bootstrap generally requires to get anything done and the massive css file which includes everything and the kitchen sink. Dont be fooled into thinking its some streamlined way of working - it hides a lot of additional css and js in its required files.

Expert coders might use the Bootstrap src files where only the parts of Bootstrap you need are deployed but many cant be bothered, ld say the majority, so end up just hooking up the bloated default files which is why Bootstrap is not a good fit for beginners, simply because they have zero idea what they are deploying

1 reply

BenPleysier
Community Expert
Community Expert
March 23, 2019

You are asking what I would use. As you are aware, I use Bootstrap and the following is the code that I have placed in my current project:

<nav class="navbar sticky-top">

That is because I have content above the navbar that scrolls up, leaving the navbar stuck at the top.

If the navbar is already at the top, as in your example, I would use

<nav class="navbar fixed-top">

No further coding required when using Bootstrap.

Please be aware that I have no affiliation with any commercial product and that my advice is based on what I have found to be the best for me.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Under S.Author
Inspiring
March 23, 2019

Can I see it demo'd anywhere? (The bootstrap version.)

BenPleysier
Community Expert
Community Expert
March 23, 2019

Sorry, working on this at the moment, but you can see it in action https://bunchokids.org/index.php

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!