title: Persistent variables in jquery
body: <p>so im kinda new to javascript and jquery still so im stuck with this little problem.
  the problem here is the "currentId" variable.
  this variable gets a value during the scroll event but i need it to remain even after the scroll event has passed and taken into account during the next scroll event insted it just returns to null or undefined.</p>
  
  <p>can anybody point me in the right direction here? cause iv been reading for a day now hahaha.</p>
  
  <pre><code>$("#content").on("scroll resize", function(){    //on scroll
  
      var pos=$("#frontpage").offset();    //take front page position in variable
  
      $('.page').each(function(){    //for each div with a class of page
  
          if(pos.top &gt;= $(this).offset().top &amp;&amp; pos.top &lt; $(this).next().offset().top){    //if this divs position is in the correct range
  
              if (currentId != $(this).attr('id')|| typeof currentId == 'undefined') {    //if currentId Var is diffrent from this divs id or is undefined
  
                  var currentId = $(this).attr('id');    //set currentId Var to this divs id
  
                  $(this).addClass( "foo" );    //add class foo to this div
  
              }else{
                              //Else do nothing
              };    //endIfElse
  
          }else{
              $(this).removeClass( "foo" );     //Else remove the foo class from this div
          };                                     //endIfElse
  
      });                                //end each
  
  });
  </code></pre>