This is my first solo project, after over a year of learning, and having completed Colt Steele’s Web Dev Bootcamp on Udemy. I feel like I should know more, but I just don’t… Feeling pretty glum.
Been trying for three hours to figure out how to do what I’m trying to do.
I want to create a banner (masthead?) and navbar like the one shown here. Where the image stays static, and the navbar stays attached to the bottom of it until it gets to the top. I’ve gone through the HTML and CSS over and over, but I just can’t figure it out. There are so many classes and ID’s, and empty ones at that.
I’ve gotten so far as to get the navbar and the image in place, but can’t get beyond that.
First time trying something like this, but is this what you’re looking for?
https://codepen.io/Matthew_Keating/full/eEOGjR/
1 Like
Exactly! Now, how’d you figure that out? 
edit: No, that doesn’t work with Bootstrap. "/
https://www.w3schools.com/howto/howto_css_parallax.asp This will show you how to do the effect with images.
For keeping the nav bar at the top I used javascript to check when the user scrolls below the navbar, then setting the nav top to the scrollY value. If the user scrolls above a certain position I set the nav top to its beginning position.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
https://developer.mozilla.org/en-US/docs/Web/Events/scroll
EDIT: Sorry I don’t use Bootstrap much.
Why isn’t it working? Are you using the grid?