使用jQuery在滾動時從右向左滑動元素

我有並列的li元素。當我向下滾動到底部時會出現一個li元素，當我向後滾動時會消失。我用jQuery使用fadeIn和fadeOut實現了這一點。不過，我正在嘗試使用滑動效果而不是淡化效果來實現這一點。使用jQuery在滾動時從右向左滑動元素

下面是代碼：

$(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:

來源

2017-08-26 user38208

你想滑動效果....？ –

是滑動效果 – user38208

你想要這樣[更新的小提琴]（https://jsfiddle.net/1a01xtxL/2/） –

而是躲在有關li的，給它一個零寬度和動畫效果。對於工作，你還需要設置保證金爲零（讓對方看到li粘在窗口的右側），並給動畫li的overflow: hidden屬性：

$(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>

來源

2017-08-26 08:52:18 trincot

使用jQuery在滾動時從右向左滑動元素

回答

相關問題