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

Report · Apr 13, 2017

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 :

Making a (horizontal, middle-of-the-screen) navbar stick to the top of the page once it's scrolled its way up there.
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!

Report · Apr 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.

Report · Apr 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).

Report · Apr 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>

$(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>

<h1>Welcome</h1>

</header>

<h3>Navigation goes here</h3>

</nav>

<h2>Content</h2>

</section>

</body>

</html>

Report · Apr 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.

Report · Apr 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)

$(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;

}

Report · Apr 13, 2017

Do I risk conflicts later on if I'm linking to jQuery (as you suggest) as well as using Animate.css (haven't yet, but was seriously considering it for the final touches later on)?

Report · Apr 14, 2017

I haven't used animate.css so I can't tell you for sure.

What I would do is include what you think are the most important features you want in your wesbsite first then add those features that you don't think are as important. If they work then they work, if not you either have to revise the workflow or as they are an 'insignificant' feature don't include them.

There is always risk of conflict. The more poorly written plugin .js files you link to that will increase.

Report · Apr 17, 2017

This question has been resolved off forum - post 6 - for anyone wanting to achieve the same effect.

Report · Apr 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;

}

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

1 Correct answer