Something is going wrong with this code and I can't find the bug

I need this code to work; docHeight appears as "undefined" but I it should be the "auxiliar" class height. The class height can change with the width of the window. Thank you

var docHeight = $('.auxiliar').css("height");  
var variableXXX = false;
$(window).scroll(function() {
	var scrollPercent = 100 * $(window).scrollTop() / docHeight;
     if ( scrollPercent >= 5 && variableXXX == false){
        variableXXX = true;
          alert($(document).scrollTop()); 
      }
});

Answers 1

  • Seems as if you may be a little new but here is what's happening. The code that you think is getting the height is wrong.

    var docHeight = $('.auxiliar').css("height");
    

    This code sets the height value of the element to and empty string. Basically wiping it out. That's why you are getting undefined. It should be.

    var docHeight = $('.auxiliar').height();
    

    This gets the height value of the element. And place it inside of your scroll function or it will not recalculate with the scroll of the window. It will all way be the value it was on page load. I think you are wanting it to change.


Related Articles