CODEWITHSUNDEEP
javascriptjqueryhtml
user38208
user38208

Reputation: 1094

Sliding a element from right to left on scroll using jQuery

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.

Below is the code:

$(document).scroll(function() {
   var y = $(this).scrollTop();
   if (y > 180) {
     $('.header-avail')
     .attr('style', 'display: block !important;')
     .fadeIn();
   } 
   else {
     $('.header-avail').fadeOut();
   }   
});

HTML: 

<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">

 <li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386">
  <a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a>
 </li>

 <li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;">
  <a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a>
 </li>
</ul>

Fiddle:

Upvotes: 3

Views: 1434

Answers (1)

trincot
trincot

Reputation: 350034

Instead of hiding the li concerned, give it a zero width, and animate that. For that to work, you also need to set the margin to zero (so the other visible li sticks to the right side of the window), and give the animating li an overflow: hidden attribute:

$(document).scroll(function () {
  var show = $(this).scrollTop() > 180,
      visible = $('.header-avail').width() > 0;
  if (show === visible) return; // nothing to do
  $('.header-avail').stop().animate({marginLeft: 20 * show, width: 100 * show});
});
body {height: 2000px;}

#primary-menu {
    letter-spacing: 1px;
    list-style: none;
    margin: 0; /* all margins 0 */
    padding: 0;
    padding-top: 250px;
}
#primary-menu > li {
    display: inline-block;
    margin: 0; 
    position: relative;
    background: red;
    height: 300px;
    float: right;
}
/* show, but with zero width and margin */
.header-avail{width: 0; margin: 0; overflow: hidden}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
   <li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
   <li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>
</ul>

Upvotes: 1

Related Questions