Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Shrink Logo After Scrolling down


michael2019

Question

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.

Link to comment

2 answers to this question

Recommended Posts

  • 0
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>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...