1

Heyo,

so I was wondering if it is possible to show the fade-effect of a div, if it is 20% away from the bottom within the currend screen view. So for example if you scroll down on a page and the following contentbox gets a distance of 20% of the screen-height to the bottom of the screen, the fade-in effect runs.

I want this because of the responsive function. I don't want to write a new pixel height for the fade-effect everytime the Screensize changes.

Here's the code I'm currently using:

function Scroll(){
var top = document.getElementById('div1');
var ypos = window.pageYOffset;
    if (ypos > 1000){
        top.style.opacity = "1";
    }
    else {
        top.style.opacity = "0";
    }
}
window.addEventListener("scroll",Scroll);
Pelle2010
  • 143
  • 1
  • 13
  • [Check if element is between 30% and 60% of the viewport](//stackoverflow.com/q/29891587) may help. – Tushar Apr 21 '17 at 08:34
  • 1
    Possible duplicate of [Check if element is between 30% and 60% of the viewport](http://stackoverflow.com/questions/29891587/check-if-element-is-between-30-and-60-of-the-viewport) – Marek J Apr 21 '17 at 09:10

1 Answers1

0

Have you looked into scroll combined with position and height? https://api.jquery.com/scroll/ and https://api.jquery.com/position/ On the scroll you could get the position of the element in question and compare to the window. http://api.jquery.com/height/ and How to get the 'height' of the screen using jquery Those should be all the tools you need.

Community
  • 1
  • 1
Vbudo
  • 405
  • 4
  • 9