title: How do I make this jquery code less redundant and more efficient?
body: <p>I'm relatively new to writing javascript. The js code below is modified from a previous answer I found on here. It does exactly what I want it to do functionality-wise, however, it's redundant and calling the code every time the mouse enters (which takes more resources than it needs too).</p>
  
  <p>Any suggestions on how to make this less redundant and more efficient?</p>
  
  <p><strong>SIMPLIFIED DEMO HERE:</strong> <a href="http://jsfiddle.net/nsnzd9cL/" rel="nofollow">http://jsfiddle.net/nsnzd9cL/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="category" id="commercials"&gt;
          &lt;p&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;
          &lt;/p&gt;
          &lt;div class="scroll"&gt;
              &lt;p&gt;Scroll&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="category" id="photography"&gt;
          &lt;p&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;
          &lt;/p&gt;
          &lt;div class="scroll"&gt;
              &lt;p&gt;Scroll&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="category" id="experiments"&gt;
          &lt;p&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;Something
              &lt;br /&gt;
          &lt;/p&gt;
          &lt;div class="scroll"&gt;
              &lt;p&gt;Scroll&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  var arrow1 = $('#commercials .scroll');
  var arrow2 = $('#photography .scroll');
  var arrow3 = $('#experiments .scroll');
  
  $("#commercials").mouseenter(function () {
  
      if ($('#commercials').hasScrollBar()) {
          arrow1.css({
              'visibility': 'visible'
          });
      } else {
          arrow1.css({
              'visibility': 'hidden'
          });
      }
  });
  
  $("#photography").mouseenter(function () {
  
      if ($('#photography').hasScrollBar()) {
          arrow2.css({
              'visibility': 'visible'
          });
      } else {
          arrow2.css({
              'visibility': 'hidden'
          });
      }
  });
  
  $("#experiments").mouseenter(function () {
  
      if ($('#experiments').hasScrollBar()) {
          arrow3.css({
              'visibility': 'visible'
          });
      } else {
          arrow3.css({
              'visibility': 'hidden'
          });
      }
  });
  
  (function ($) {
      $.fn.hasScrollBar = function () {
          return this.get(0).scrollHeight &gt; (this.height() + 1);
      }
  })(jQuery);
  </code></pre>