Shopify Question posted in
The Shopify help center can be found here.

How to change opacity of element when scrolled to bottom within media query – Shopify

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!

Tags:

2

Answers


  1. 0

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

    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