Header Resize On Scroll with Animations – Themeco Community

Header Resize On Scroll with Animations

awecesar — Fri, 20 Feb 2015 03:09:36 +0000

Hey,
I would like to have my top bar with my logo and navigation change a bit if someone scrolls down – the effect I mean is visible here: http://callmenick.com/tutorial-demos/resize-header-on-scroll/
Is there a way to accomplish this in X?
Thanks so much – you guys are making this theme twice as good!

Reply To: Header Resize On Scroll with Animations

Zeshan — Fri, 20 Feb 2015 14:38:08 +0000

Hi there,

Thanks for writing in! This is technically possible with custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Try inserting this under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 150) {
      navbar.addClass('navScroll');
    } else {
      navbar.removeClass('navScroll');
    }
  });
});

And this under Custom > CSS in the Customizer:

@media (min-width: 980px) {
    .x-navbar .x-navbar-inner,
    .x-navbar .x-brand img,
    .x-navbar .desktop .x-nav > li > a {
        transition: 0.25s all linear;
    }
    .x-navbar.navScroll .x-navbar-inner {
        min-height: 80px;
        transition: 0.25s all linear;
    }
    .x-navbar.navScroll .x-brand img {
        max-width: 150px;
    }

    .x-navbar.navScroll .desktop .x-nav > li > a {
        height: 70px;
        padding-top: 40px;
    }
}

Hope this helps. 🙂

Thank you.

Reply To: Header Resize On Scroll with Animations

awecesar — Fri, 20 Feb 2015 22:12:48 +0000

wow this works really well! thank you so much!
just one more question to this – could you provide me with a code that allows me to change the logo image when scrolling down like here in my photoshop image?
http://prntscr.com/67qfar

THANK YOU!

Reply To: Header Resize On Scroll with Animations

Senthil — Sat, 21 Feb 2015 13:30:46 +0000

Hi There,

We’re happy that it solved your problem.

Pleas replace the previous JavaScript code with the below one to use an alternate image while it scrolls down.

You can can replace this line in the code with your own image URL
var imageUrl=’http://placehold.it/50×50‘;

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');
	var imageUrl='http://placehold.it/50x50';

    if (scrollPos > 150) {
    	navbar.addClass('navScroll');
		jQuery('.x-navbar.navScroll .x-brand img').css('opacity',0);
		jQuery('.x-navbar.navScroll .x-brand').css('background','url('+imageUrl+') no-repeat left center');
    } else {
		    			
		jQuery('.x-navbar.navScroll .x-brand').css('background','transparent');
		jQuery('.x-navbar.navScroll .x-brand img').css('opacity',1);		
		navbar.removeClass('navScroll');
		
    }
  });
});

Hope it helps, thanks!

Reply To: Header Resize On Scroll with Animations

scottkwilson — Mon, 28 Mar 2016 13:35:18 +0000

This has worked beautifully for me! Just what I needed! I do have a request for an additional tweak though. On my site (scottkeithwilson.com), the header transitions to soon on the homepage. I’m currently using scrollPos > 33 in the JS, which is perfect for all other pages, but as you can see on the homepage the transition is too soon. I’d like it to transition when the header touches the top of the browser. Is this possible?

Also, on a slightly different note, it would really be ideal to replicate this effect (http://www.rubbish-taxi.com/) where the header disappears from the page, then drops down in a smaller verison. If this is possible (i.e. within scope of X support), that would really make my day.

Thanks!

Reply To: Header Resize On Scroll with Animations

Christian — Tue, 29 Mar 2016 00:47:06 +0000

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.