Reducing Collections banner height while scrolling, Spotlight Theme

[starscream911]

Hello experts! 

I want my collection banner to reduce it's height while scrolling on mobile and desktop. 
Please suggest me code to execute. See photos, the black section is our target.

  

[rajweb]

Hey @starscream911 ,

Could you share your store URL so I can check?

[starscream911]

www.elysiumreads.com

[rajweb]

Hey @starscream911 ,

To reduce the height of the collection banner while scrolling on both mobile and desktop, you can use a combination of CSS and JavaScript (or jQuery) to achieve this effect. Below is an example of how you might implement this.

CSS:

First, add the following CSS to your theme's stylesheet to define the initial and scrolled states of your banner:

/* Initial state for the collection banner */
.collection-banner {
    height: 300px; /* Adjust the initial height as needed */
    transition: height 0.3s ease; /* Smooth transition effect */
}

/* Scrolled state for the collection banner */
.collection-banner.scrolled {
    height: 100px; /* Adjust the reduced height as needed */
}

Javascript:

Next, add this JavaScript code to your theme. You can place it in your theme's JavaScript file or within the <script> tags in the theme.liquid file.

document.addEventListener('scroll', function() {
    const banner = document.querySelector('.collection-banner');
    if (banner) {
        if (window.scrollY > 50) { // Adjust this value to change when the height reduces
            banner.classList.add('scrolled');
        } else {
            banner.classList.remove('scrolled');
        }
    }
});

Instructions:

1. Go to Online Store > Themes > Edit Code.  In the Assets  folder, find your stylesheet (usually  theme.css or style.css) and add the CSS code at the bottom.

2. Add the  Javascript&colon;  In the same Edit Code section, find the Assets folder again and locate your JavaScript file (often named theme.js or similar). Paste the JavaScript code at the bottom of the file.

3. Adjust Values : You may need to adjust the height values and the scroll threshold in the JavaScript code according to your design preferences.

4.  After adding the code, make sure to save the changes.

After implementing the code, test it on both mobile and desktop devices to ensure the height reduction works as expected when you scroll down the page. Let me know if you need any further adjustments or assistance!

thanks

[GTLOfficial]

Hello @starscream911 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 749px) {
.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social {
height: 11rem !important;
margin-top: -5rem !important;
}
}
@media screen and (max-width: 749px) {
.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social {
height: 7rem !important;
margin-top: -3rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[starscream911]

Hello! 

This is out of point, and this code doesn't work at all.

[Dan-From-Ryviu]

Hi, please try to add this addition code in theme.liquid file and check

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    
    if (window.scrollY === 0) {
      // Add the class when scrolled to the top
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled away from the top
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.5rem 0;
}
</style>

[starscream911]

where exactly to add this?

[Dan-From-Ryviu]

theme.liquid file, before </head> 

[starscream911]

Doesn't work as we expect. Resizing takes too much time and it actually happens when i scroll down and go back to the top - then we see this section reduced, but not when scrolling down at first place. And also can we do more reducing when we choose "Relationships & Parenting" collection?

[starscream911]

This doesn't work properly. It reduces the size but after a period of time, I want it immediately auto reducing. 

[Dan-From-Ryviu]

So please update the code to this 

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    var threshold = 50; // Change this value to adjust when the class is added

    if (window.scrollY > threshold) {
      // Add the class when scrolled down beyond the threshold
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled back above the threshold
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.5rem 0;
}
</style>

[starscream911]

It works perfectly now! Also can we reduce the banner height a bit more when it is already reduced, in mobile preview. "Relationships & Parenting" niche is on 2 rows for more aestethic view, can the banner be with less height in general?

[Dan-From-Ryviu · Accepted solution]

Update the code and check again

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    var threshold = 50; // Change this value to adjust when the class is added

    if (window.scrollY > threshold) {
      // Add the class when scrolled down beyond the threshold
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled back above the threshold
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.2rem 0;
    font-size: 20px !important;
}
</style>

[starscream911]

PerfecT! Now please let's make it with same padding on the top and the bottom, because in the moment the text itself is a bit lifted to the top?

[starscream911]

PerfecT! Now please let's make it with same padding on the top and the bottom, because in the moment the text itself is a bit lifted to the top?

[starscream911]

Can you please response to my final question???

[Dan-From-Ryviu]

Please update code to this and check again 

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    var threshold = 50; // Change this value to adjust when the class is added

    if (window.scrollY > threshold) {
      // Add the class when scrolled down beyond the threshold
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled back above the threshold
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.2rem 0;
    font-size: 20px !important;
    line-height: 1;
}
</style>

[starscream911]

maybe it still needs adjustment

 

[Dan-From-Ryviu]

Try to update coded and check again

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    var threshold = 50; // Change this value to adjust when the class is added

    if (window.scrollY > threshold) {
      // Add the class when scrolled down beyond the threshold
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled back above the threshold
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.2rem 0;
    font-size: 20px !important;
    line-height: 1;
    display: flex;
    align-items: center;
}
</style>

[starscream911]

no this doesn't work, we are talking about vertical adjustment. Vertical center. 

 

Also please note i have custom css for the h1 , if you think tell me to delete it, and also give me working code for the vertical adjust of it.

 

[starscream911]

Can you please center the text between bottom and top???

[Dan-From-Ryviu]

Code update 

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('shopify-section-template--23131122794838__banner');
    var threshold = 50; // Change this value to adjust when the class is added

    if (window.scrollY > threshold) {
      // Add the class when scrolled down beyond the threshold
      banner.classList.add('reduce-section');
    } else {
      // Remove the class if scrolled back above the threshold
      banner.classList.remove('reduce-section');
    }
  });
</script>
<style>
@media (max-width: 749px) {
#shopify-section-template--23131122794838__banner { top: 44px !important; }
}
#shopify-section-template--23131122794838__banner.reduce-section .collection-hero__title { 
    margin: 1.2rem 0;
    font-size: 20px !important;
    line-height: 1;
    display: flex;
    align-items: center;
}
</style>