{"id":6560,"date":"2014-04-20T09:41:16","date_gmt":"2014-04-20T09:41:16","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/20\/jquery-height-difference-for-scrolltop-and-offset-top-when-lined-up-to-the-top-of-the-screen-collection-of-common-programming-errors-2\/"},"modified":"2014-04-20T09:41:16","modified_gmt":"2014-04-20T09:41:16","slug":"jquery-height-difference-for-scrolltop-and-offset-top-when-lined-up-to-the-top-of-the-screen-collection-of-common-programming-errors-2","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/20\/jquery-height-difference-for-scrolltop-and-offset-top-when-lined-up-to-the-top-of-the-screen-collection-of-common-programming-errors-2\/","title":{"rendered":"jQuery: height difference for scrollTop and Offset.top when lined up to the top of the screen?-Collection of common programming errors"},"content":{"rendered":"<p>I am trying to get css animations to go off correctly when the page is scrolled to each element and so I have used this jquery as an example:<\/p>\n<pre><code>\/\/ element animation scroll detection\n(function ($, document, undefined) {\n    var animation1 = $('.animation1').offset().top;\n\n    $(window).scroll(function() {\n        var winTop = $(window).scrollTop();\n        var winHeight = $(window).height();\n\n        if(winTop &gt;= (animation1-winHeight)){\n        $('.animation1').addClass(\"animate-from-left\");\n        }\n\n        $('.scrollTop').html(\"scrollTop: \"+winTop);\n        $('.elementOffset-top').html(\" element Offset.top: \"+animation1);\n    });\n})(jQuery, document);\n<\/code><\/pre>\n<p>Here is the live version of this to see: http:\/\/bbmthemes.com\/themes\/smart\/<\/p>\n<p>.animation1 is the div for the first animation. Directly above that div I have used jquery to output the value of the Offset.top of animation1 as well as the value of scrollTop, which updates as you scroll.<\/p>\n<p>What I cannot understand is, why when I scroll so that the jquery variable outputs are right at the very top edge of the screen does it say that the scrollTop distance is ~430px more than the Offset.top of div.animation1 which is basically touching the top edge of the screen?<\/p>\n<p>This is totally throwing off when to trigger the animations and I can&#8217;t get them to work consistently when they are on different parts of the page because the difference in those two values keeps changing.<\/p>\n<p>I tried to put this into a jsfiddle but I just cannot get the problem to replicate the same way. Here is a very messy version but the values aren&#8217;t quite the same on the output: http:\/\/jsfiddle.net\/UsgNY\/1\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am trying to get css animations to go off correctly when the page is scrolled to each element and so I have used this jquery as an example: \/\/ element animation scroll detection (function ($, document, undefined) { var animation1 = $(&#8216;.animation1&#8217;).offset().top; $(window).scroll(function() { var winTop = $(window).scrollTop(); var winHeight = $(window).height(); if(winTop &gt;= [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6560","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6560"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6560\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}