skip to Main Content

I just want to ask. I want to make the product image thumbnail in shopify disappear when I scrolled down to bottom of the page, and I want a bit of transition with it.. I really can’t figure out how to do this..

Here’s my code..
https://jsfiddle.net/vsLdz4qb/1/

  function myFunction(screenWidth) {
    if (screenWidth.matches) { // If media query matches
      window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
           document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
           document.getElementByClass("product-single__thumbnails").style.opacity = 0;
        }
      };
    }

  }

  let screenWidth = window.matchMedia("(min-width: 750px)");
  myFunction(screenWidth); // Call listener function at run time
  screenWidth.addListener(myFunction)

Thank you so much in advance!

2

Answers


  1. The correct document method is document.getElementsByClassName and since it returns an array you need the first element of it so change this:

    document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
    document.getElementByClass("product-single__thumbnails").style.opacity = 0;
    

    to:

    document.getElementsByClassName("product-single__thumbnails")[0].style.transition = "0.65s";
    document.getElementsByClassName("product-single__thumbnails")[0].style.opacity = 0;
    

    You can read more about the method here

    Login or Signup to reply.
  2. You should use getElementsByClassName in place of getElementByClass(This is not correct function)
    and this will return an array like structure so you need to pass 0 index, if only one class available on page.

    or you can try querySelector(".product-single__thumbnails");

    and for transition, you can define that in your .product-single__thumbnails class like: transition: opacity .65s linear; – use here which property, you want to animate.

     <!-- [product-image] this is for product image scroll down disappear --> 
    
      function myFunction(screenWidth) {
        if (screenWidth.matches) { // If media query matches
          window.onscroll = function(ev) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
               document.getElementsByClassName("product-single__thumbnails")[0].style.opacity = 0;
            }
          };
        }
    
      }
    
      let screenWidth = window.matchMedia("(min-width: 350px)");
      myFunction(screenWidth); // Call listener function at run time
      screenWidth.addListener(myFunction)
    body {
      margin:0;
      height: 1000px;
    }
    .product-single__thumbnails {
      background-color: red;
      color: white;
      width: 50px;
      height: 50px;
      position: fixed;
      transition: opacity .65s linear;
      border-radius: 4px;
      margin: 20px;
      text-align: center;
    }
    <div class="product-single__thumbnails">
      <p>red</p>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search