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

Contributor ,
Mar 22, 2019 Mar 22, 2019

Copy link to clipboard

Copied

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!

Views

356

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 23, 2019 Mar 23, 2019

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

...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 22, 2019 Mar 22, 2019

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 22, 2019 Mar 22, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 22, 2019 Mar 22, 2019

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 23, 2019 Mar 23, 2019

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines