Shrink Logo After Scrolling down

Site URL: https://beyoubetruecounselling.squarespace.com/

Hi, I was able to use a CSS code that makes my logo shrink when I scroll, but my issue is I would like to delay the effect when I scroll down about halfway through the top banner. The effect would be the opposite for when I scroll up about halfway through the top banner the logo would go to the original size.

Current Code:

//---shrink top logo---
#header .header-title-logo img {
  transition: max-height 300ms ease-in-out}

#header.shrink {.header-announcement-bar-wrapper{padding-top: 20px !important; padding-bottom: 20px !important;} .header-title-logo img {max-height: 50px;}}

Website below:

URL: https://beyoubetruecounselling.squarespace.com

PW: 5N8bn#T&

Thank you.

On 12/9/2020 at 12:00 AM, michael2019 said:

Site URL: https://beyoubetruecounselling.squarespace.com/

Hi, I was able to use a CSS code that makes my logo shrink when I scroll, but my issue is I would like to delay the effect when I scroll down about halfway through the top banner. The effect would be the opposite for when I scroll up about halfway through the top banner the logo would go to the original size.

Current Code:

//---shrink top logo---
#header .header-title-logo img {
  transition: max-height 300ms ease-in-out}

#header.shrink {.header-announcement-bar-wrapper{padding-top: 20px !important; padding-bottom: 20px !important;} .header-title-logo img {max-height: 50px;}}

Website below:

URL: https://beyoubetruecounselling.squarespace.com

PW: 5N8bn#T&

Thank you.

Remove the css you got and replace with this

<style>
	#header .header-title-logo img {
          transition: max-height 300ms ease-in-out
    }

    .logo-shrink #header .header-announcement-bar-wrapper{padding-top: 20px !important; padding-bottom: 20px !important;} 
    .logo-shrink #header .header-title-logo img {max-height: 50px;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
		function addClass(el, classNameToAdd){
            el.className += ' ' + classNameToAdd;   
        }

        function removeClass(el, classNameToRemove){
            var elClass = ' ' + el.className + ' ';
            while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
                 elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
            }
            el.className = elClass;
        }
        function hasClass(ele,cls) {
          return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
        }
        window.addEventListener("scroll", function() { 
            var elem = document.querySelector('#page section:first-child');
            var height = elem.clientHeight;
            if (window.scrollY >= height*0.9) {
                if ( !hasClass(document.querySelector("body"), "logo-shrink") ) {
                    addClass(document.querySelector("body"), "logo-shrink");
                }
            } else if (window.scrollY <= height*0.5) {
                if ( hasClass(document.querySelector("body"), "logo-shrink") ) {
                    removeClass(document.querySelector("body"), "logo-shrink");
                }      
            }
        });
});
	
</script>

I appreciate your help. Thank you so much.

Hi @Beyondspace, I'm resurrecting this years-old post to firstly say THANK YOU!!! I have been searching high and low for help with this! I've got it working 90% of the way I'd like. I'm just wondering if you might be able to help with the transition speed from regular header to fixed header? It's quite fast and I would love to slow it down.

The site is https://www.andasanas.com/home-new pw 140ann