javascript - jQuery conflict causing woocommerce product images not to load -

i have script hide navigation @ point on homepage:

jquery(document).ready(function() {     jquery("#dot-nav").show(); //show div     var topofothdiv = jquery("#hidedn").offset().top;     jquery(window).scroll(function() {         if(jquery(window).scrolltop() > topofothdiv) { //scrolled past other div?             jquery("#dot-nav").hide(100); //reached desired point -- hide div         }         if(jquery(window).scrolltop() < topofothdiv) { //hide div             jquery("#dot-nav").show(100);         }     }); }); 

however it's causing woocommerce product images not load. don't need script on woocommerce pages before attempt mess functions.php enqueue on homepage know how can solve this? i'm little more jquery novice apologise if need more context etc!

the error raised, because cannot offset of hidden element, or element not exist.

jquery not support getting offset coordinates of hidden elements or accounting borders, margins, or padding set on body element.

what need check if element exists:

jquery(document).ready(function() {     var dotnav = jquery("#dot-nav");     var thediv = jquery("#hidedn:visible");     if( dotnav.length>0 && thediv.length>0 ) {         dotnav.show(); //show div         jquery(window).scroll(function() {             var topofothdiv = thediv.offset().top;             if(jquery(window).scrolltop() > topofothdiv) { //scrolled past other div?                 dotnav.hide(100); //reached desired point -- hide div             }             if(jquery(window).scrolltop() < topofothdiv) {                 dotnav.show(100);             }         });     }; }); 

please note: need check offset inside window scroll event.