title: Sliding a element from right to left on scroll using jQuery
body: <p>I have li elements that are side by side. One of the li elements appears when I scroll down to the bottom and disappears when I scroll back up. I have achieved this with jQuery using fadeIn and fadeOut. However, I am trying to achieve this using a sliding effect rather than a fading effect.</p>
  
  <p>Below is the code:</p>
  
  <pre><code>$(document).scroll(function() {
     var y = $(this).scrollTop();
     if (y &gt; 180) {
       $('.header-avail')
       .attr('style', 'display: block !important;')
       .fadeIn();
     } 
     else {
       $('.header-avail').fadeOut();
     }   
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;ul id="primary-menu" class="menu nav-menu" aria-expanded="false"&gt;
  
   &lt;li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"&gt;
    &lt;a href="#" class="menu-image-title-after"&gt;&lt;span class="menu-image-title"&gt;Contact Us&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
  
   &lt;li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"&gt;
    &lt;a href="#" class="menu-image-title-after"&gt;&lt;span class="menu-image-title"&gt;Check Availability&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/1a01xtxL/1/" rel="nofollow noreferrer">Fiddle:</a></p>