Question

The function below calculates how far the user has scrolled by taking the window height and dividing it by the window height. As that percentage increases, I want to increase the css ‘height’ amount of div ‘arrow’. What am I doing wrong?

$(document).scroll(function(){

         //  grab the scroll amount and the window height
          var scrollAmount = $(window).scrollTop();
          var documentHeight = $(document).height();

       //    calculate the percentage the user has scrolled down the page
          var scrollPercent = (scrollAmount / documentHeight) * 100;



          function increaseHeight() { 
                $(".arrow").css({
                    height: scrollPercent + 'px'
                });

               //do something when a user gets 50% of the way down my page
      });  

Answer 1

This should work – http://jsfiddle.net/LsuY4/1/

$(document).scroll(function(){
         // grab the scroll amount and the window height
          var scrollAmount = $(window).scrollTop();
          var documentHeight = $(document).height();

          // calculate the percentage the user has scrolled down the page
          var scrollPercent = (scrollAmount / documentHeight) * 100;

          $(".arrow").css({
             height: scrollPercent + 'px'
          });

          // do something when a user gets 50% of the way down my page
      });

Alternatively (I am not sure what you are trying to do here):

 $(document).scroll(function(){
     // grab the scroll amount and the window height
      var scrollAmount = $(window).scrollTop();
      var documentHeight = $(document).height();

      // calculate the percentage the user has scrolled down the page
      var scrollPercent = (scrollAmount / documentHeight) * 100;

      var fnDoScroll = function() {
        $(".arrow").css({
          height: scrollPercent + 'px'
        });
      };

      // do something when a user gets 50% of the way down my page
      if (scrollPercent >= 50)
        fnDoScroll();
  });