CODEWITHSUNDEEP
jquerycss
Joe Isaacson
Joe Isaacson

Reputation: 4132

Use a scroll var to increase the height of an element?

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
      });

Upvotes: 0

Views: 3055

Answers (1)

hyankov
hyankov

Reputation: 4120

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();
  });

Upvotes: 2

Related Questions