So i have this idea - I want to hide my navbar-brand class if the navbar is under my image header (ie page hasn't scrolled) and then the moment the navbar "sticks" to the top of the screen after scrolling i want the brand to show.
Hiding the brand using display:none was easy - now how do i tell it to become un-hidden after the page has been scrolled the height of my header image (150px)? I'm hoping for a non-JS answer but since writing it out i realise that there probably isn't a purely CSS solution. A transition effect would also be nice here i think.
You need JS to determine if the page was scrolled and how far it scrolled.
So I tried this little bit of JS code to determine if the page was scrolled and if it was greater than or equal to 150.
$(window).scroll(function() {
var $this = $(this);
if ($this.scrollTop() >= 150) {
$(".navbar").addClass("scrolled");
} else {
$(".navbar").removeClass("scrolled");
};
});
So based on the position of the screen when scrolled, if it reaches 150 it adds the class scrolled to the navbar. Then based on that you apply the following CSS.
The Brand is positioned off the left side of the screen. This way the rest of the Nav links etc... don't jump in and out of position. When the page is scrolled the second rule applies by moving the Brand back in to position again. Since a transition is set, this slide in from the left is animated.
When scrolled less the 150, the class scrolled is removed and so the Brand scrolls back off the page. The transition settings are to try and smooth the scroll into position look/feel.
I can imagine others might have other ways of doing this and I'd like to hear about them :)
Just for an FYI, the negative value in property transform:translate(-100em); sets the element off the left side of the screen by 100em and that's pretty high. It really should be just a enough or slightly more for the element to not be seen. That will make it a smoother visual.
transform:translate( [position X] , [position Y] ); So you know you can move things left (negative X) and right (positive X) and top (negative Y) and bottom (positive Y).
I'd say check out these sites for more info on working with transitions and transforms
WOW!! I was expecting a quick guide or something! Thanks for the help Saj. I love how you kept it so simple yet elegant! Thanks a million. It works like a charm AND i can actually understand what's going on there so i can modify it.
I did slightly modify the CSS so that it works with a fading transition.
Edit: I do have a question though: Should i add the " -webkit-transition:" style to it to make it compatible with the safari browser? Or is this obsolete?
Thanks again for the help and for getting me started on transitions... Gonna use it a lot.
Using https://caniuse.com/#feat=css-transitions as I basis, I'd say any browser from 2012/2013 and up support it without a prefix so I don't think you need it. Only Opera mini doesn't support it at all.