0

So I want to add a class on a specific screen height. So I've done: 

window.onscroll = function() {scrollPost()};

function scrollPost () {
    var x = window.screen.width;
    var i = window.scrollY;
    var a = i / x;
    animator (a);
    slide(a);
}


function slide(x){

var a = (x * 100);
var i = Math.round(a);
console.log(i);
var slideIn = document.querySelector(".slide-in-right");
var slideOut = document.querySelector(".slide-out-left");

if (i >= 90){
slideOut.classList.add("animate");

slideIn.classList.add("animate");
slideIn.style.display = ("block");
    }

The problem however. Is that on different screens, the value will be different. Thus therefore on different screens it will toggle at a different time. I could probably make ifstatements, based on screen width. But then I'd need a whole lot of them.

I want the animation to be added only after the container is 100% in the screen height. How would you do this?

Dario Sanchez Martinez
  • 113
  • 1
  • 9
  • Maybe this will help you: https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – David T Oct 17 '18 at 10:44

1 Answers1

1
  • You are going to have to get users viewport (window height).
  • Divide it by half
  • Add it towards your IF position.

I wrote a simular answer, how ever it was written jQuery, if you are considering it would be a better output.

How to trigger a class that is only in view with wapoints

However to implement that to plain js:

Get user screen height: 

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

divide y by half, and then add to your current position that checks if element is scrolled.

I will add this just in case. To get element position.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

Source: How to get the distance from the top for an element?

Thomas J.
  • 543
  • 4
  • 17
  • Thanks! Those are a lot of new things I haven't used before. So I'll try to play around with console log first! Are these things where jQuery is better to use? – Dario Sanchez Martinez Oct 17 '18 at 11:09
  • Well not necessarily better, but easier and faster, jQuery is basically a library of js features, so it adds a lot more functionality and a lot less code to your files, how ever, jQuery code can be hard to read if you are reading someone else's code that isn't written properly. – Thomas J. Oct 17 '18 at 11:14
  • If you want to read about in fact how different are js from jQuery, this article isn't so bad. https://www.c-sharpcorner.com/article/javascript-vs-jquery-difference-between-javascript-and-jquery/ – Thomas J. Oct 17 '18 at 11:17