CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vezro
Vezro

Reputation: 13

adding two .height() 's together? Jquery

I'm trying to add two .height()'s together in order to get a responsive number for my onScroll event how do I add two of these together?

I'm general, I'm just trying to get the animation to fire after getting to the bottom of everything above the element. Is there any other way to do that besides just adding the heights of everything above?

window.addEventListener('load', function() {
    $(window).scroll(function() {
        var eventScroll = window.pageYOffset;
        var eventScrollAmount = ($("#sectionOneImage").height() + $("#bannerOne").height());

        if( eventScroll > eventScrollAmount) {
            $("#sectionOneImage").addClass("animated slideInLeft ");
        }
        else {
            $("#sectionOneImage").removeClass("animated slideInLeft ");
        }
    });
});

Upvotes: 1

Views: 256

Answers (1)

Win
Win

Reputation: 5594

Here's an example of how to grab two heights using vanilla JS.

var sizeOfOne = document.getElementById('one').offsetHeight;
var sizeOfTwo = document.getElementById('two').offsetHeight;

document.getElementById('hook').innerHTML = 'The first div is ' + sizeOfOne + ' pixels in height, the second div is ' + sizeOfTwo + ' pixels in height. The total size of both div\'s are ' + (sizeOfOne + sizeOfTwo) + ' pixels.';
#one {
  height: 50px;
  background: red;
}

#two {
  height: 75px;
  background: blue;
}
<div id="hook"></div>

<div id="one"></div>
<div id="two"></div>

Upvotes: 2

Related Questions