Have the navbar-brand class become visible after the navbar sticks to Top

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.

Thanks in advance

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.

.navbar-brand {
  position:relative;
  left:-100em;
  transition:all 1000ms ease 250ms;
}

.scrolled .navbar-brand {
  left:0;
}

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 :)

Saj

Actually this CSS might be better so that your not setting unnecessary properties. Also added support for IE9+

.navbar-brand {
  -ms-transform:translate(-100em);
  transform:translate(-100em);
  transition:all 1000ms ease 250ms;
}

.scrolled .navbar-brand {
  -ms-transform:translate(0);
  transform:translate(0);
}

Saj

Sounds like a pretty interesting idea, thanks for sharing it and thanks to Super Saj for coming to the rescue too! :)

Thanks Jo. :)

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

  • https://www.w3schools.com/css/css3_transitions.asp
  • https://www.w3schools.com/css/css3_2dtransforms.asp
  • https://www.w3schools.com/css/css3_3dtransforms.asp
  • http://www.css3.info/preview/css3-transitions/

Saj

Thanks Saj, I've been working on trying to find time to look into transitions more, thanks for the links that will help a lot :)

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.

   .navbar-brand {
  position:relative;
  transition:opacity 700ms ease 100ms;
  opacity:0;
}
.scrolled .navbar-brand {
  opacity:1;
}

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.

Your welcome glad I could help :)

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.

Saj