Header scrolling effect

I Need Help
1

I’ve been asked to build a header which has a large logo (for an event) in the top left. As the user scrolls the idea is for that logo to be replaced with a small one which then remains there for the rest of the page.

One thought I had was to have the top navigation bloc scroll away and then have another bloc with a sticky class follow it up and stop but of course you’d see that rolling up the page. Another would be to try and play around with the margins so one element was superimposed on top of another and then revealed by the scroll. Ideally I’d like some sort of dissolve between the two. The designer would also like the search bar to change colour from white to black at the same time.

Any suggestions on how to go about it all would be gratefully received.

2

You could just use a small script to add a custom class on scroll to the nav. A quick search brings up a lot of examples, like this one… https://www.bootply.com/109943

In that example if you look at the code, it’s adding a class called ‘shrink’ once you scroll more than 50px. You can name it what ever you want and then just create the custom classes to suit. Just update the code with what ever you decide to call the classes and then adjust the 50px to what ever suits your design.

<script>   
 $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('nav').addClass(' MY_CUSTOM_CLASS ');
      } else {
        $('nav').removeClass(' MY_CUSTOM_CLASS ');
      }
    });
</script>
3 Likes
3

Thank you very much for taking the time to respond. I’ll take a look at that and play around with it.

4

No problem. If you have any trouble, just post away.