nav bar changing position?

[Doodayer]

so in a basic rundown of what i want to happen, the nav bar should always be fixed at the top of the screen, which i’ve effectively done. but when i’m at the top of the home webpage, i would like for my logo to go above my nav bar and for the nav bar to stay securely below it. once i scroll down, the nav bar can move back up to its position and the top of its screen and stay there. I honestly have no clue how to do this, and wouldn’t begin to know how to summarize that in three key words for a google search.
http://codepen.io/Doodayer/pen/KwKxqg

if theres a more efficient way of using the image as a link, feel free to inform me. I’m fairly new to this, as in maybe 3 hours of total writing experience. thanks for all the help.

[deeve007]

Use Jquery.
Default has navbar positioned relatively so it sits below the logo.
Then when y position of nav bar reaches “0” use Jquery to change its position to “fixed” at the top of the screen.
Then when bottom y position of the logo is >0, revert the position of the navbar back to default.

[Doodayer]

Ok i don’t have much experience with jquery, so heres what i have so far:

/*jquery navbar*/
var x = $(".nav").position().top;

if (x = 0) {
    $(".nav").css("position", "fixed");
}else{
    $(".nav").css("position", "relative");
};

I’m not sure if those are the methods i should use, or how to properly find the y position of the nav bar, but thats what i’ve got.

also a weird bug i’m getting is the nav bar doesn’t have the full width, even though its set to 100%.

[Paulie_D]

Something like this:

http://codepen.io/Paulie-D/pen/oCdFp

[deeve007]

Not quite. Elements need to start off with position:relative, and then switch to position: fixed, and then vice versa when scrolling back.

[deeve007]

http://codepen.io/anon/pen/qEBQMj

(click on the “edit” link to view it non-embedded)

[Paulie_D]

Not sure position:relative is necessary…the ‘staticswitching tofixed` is equally valid BUT it does look better.

:)

[deeve007]

But it’s what he wants. The nav needs to move up with the logo/content, and THEN become fixed at the top of the screen.

Why would you want the nav to be “stuck” part way down the screen?? (until the logo disappears)

[Paulie_D]

It’s fixed below the header / logo and sticks to the top when the page is scrolled..which he wanted.

Yours is better though…as always, there’s many ways of doing something.

[deeve007]

Well we’ve certainly interpreted what he was after in different ways, but I’m sure he can make his choice with the info we’ve given him now.

[Doodayer]

thank you both for all the help. it definitely helped me get a better understanding of what i needed to do.

[Doodayer]

I’m having another issue. for some reason the code all works in the codepen, but when i run it in firefox, it doesn’t work. Possible reasons?

[Doodayer]

doesn’t work in chrome either.

[deeve007]

Have you included the required library(ies)? (eg: jquery)

[Doodayer]

thats what i’m having issues with. when i try to download jquery it takes me into a webpage full of open javascript. should it do this? also if i copy all of that can i just access it like this?

<script type=”text/javascript” src=”jquery.js”></script>

[Author]

Posts