title: jQuery .data() Firefox
body: <p>Any reason or knowledge to why using jQuery's .data() won't do anything on Firefox? I have built the following and it works great on Chrome/Safari but on Firefox it doesn't.</p>
  
  <pre><code>$(function() {
      $('.top-header-container .top-section.outer').data('size','big');
  });
  $(window).scroll(function() {
      var $headerTop = $('.top-header-container .top-section.outer');
      if ( $('body').scrollTop() &gt; 0 ) {
          if ($headerTop.data('size') == 'big') {
              $headerTop.data('size','small').stop().animate({
                  height: '40px'
              }, 600);
              $headerTop.find('.main-menu-container').stop().animate({
                  opacity: 0
              }, 600);
              $headerTop.find('.site-logo-big').fadeOut(300, function() {
                  $headerTop.find('.site-logo-small').fadeIn(300);
              });
              $headerTop.find('.social-container-big').fadeOut(300, function() {
                  $headerTop.find('.social-container-small').fadeIn(300);
              });
              $('.content-container').stop().animate({
                  marginTop: '130px'
              }, 600);
              $headerTop.addClass('small');
          }
      } else {
          if ($headerTop.data('size') == 'small') {
              $headerTop.data('size','big').stop().animate({
                  height: '205px'
              }, 600);
              $headerTop.find('.main-menu-container').stop().animate({
                  opacity: 1
              }, 600);
              $headerTop.find('.site-logo-small').fadeOut(300, function() {
                  $headerTop.find('.site-logo-big').fadeIn(300);
              });
              $headerTop.find('.social-container-small').fadeOut(300, function() {
                  $headerTop.find('.social-container-big').fadeIn(300);
              });
              $('.content-container').stop().animate({
                  marginTop: '285px'
              }, 600);
              $headerTop.removeClass('small');
          }  
      }
  });
  </code></pre>
  
  <p><strong>UPDATE:</strong> Adding <code>console.log('test');</code> directly below <code>$(window).scroll(function() {</code> so before any .data() is used, it shows in the FF console. BUT if I put a console.log below <code>if ( $('body').scrollTop() &gt; 0 ) {</code> nothing happens in Firefox, but does in Chrome. Does <code>scrollTop</code> work in FF?</p>
  
  <p>Thanks in advance,
  R</p>