Div繼續彈跳

如果用戶向下滾動並且菜單消失，我想要一個div（返回頂部）出現。 div滑落並反彈，但它一直彈跳。我只想在它被設置爲固定位置之前將其反彈一次。Div繼續彈跳

據我所知，發生這種情況是因爲代碼一遍又一遍地運行，只要「（距離+ navHeight）< = 1」，但有沒有辦法只運行一次代碼？

$(window).on('scroll', function() { 
    var scrollTop  = $(window).scrollTop(), 
     elementOffset = $('.navigation').offset().top, 
     navHeight = $('.navigation').height(); 
     distance  = Math.round((elementOffset - scrollTop)); 

    if((distance + navHeight) <= 1) { 
     $('#scroll-top').slideToggle(700, 'easeOutBounce', function() { 
      $(this).addClass('menu-stick'); 
     }); 
    } 
});

CSS

.menu-stick { 
    position: fixed; 
    z-index: 2000; 
    left: 0; 
    right: 0; 
    top: 0; 
}

編輯：Here is the live version

來源

2014-04-03 holyredbeard

你可以發佈你的HTML和小提琴呢？ – Mathias

每當您滾動並且條件'（distance + navHeight）<= 1'爲true時，slideToggle事件將觸發，隨後觸發緩衝動畫。我假設沒有滾動時彈跳停止，對嗎？ –

@MikeHometchko：即使我停止滾動，它實際上仍會彈起。您可以查看一個實時版本（鏈接在問題的底部）。 – holyredbeard

我顯然不能看到所有的代碼，但可能嘗試做一個檢查，如果該元素已經卡住或不：

if (!$('#scroll-top').hasClass('menu-stick')) { 
    // Do animation 
    // add class 'menu-stick' 
}

來源

2014-04-03 20:13:09

將動作的觸發器選擇器更改爲#scroll-top:not(.menu-stick)

所以：

if (distance + navHeight) <= 1) { 
    $('#scroll-top:not(.menu-stick)').slideToggle(700, 'easeOutBounce', function() { 
     $(this).addClass('menu-stick'); 
    }); 
}

來源

2014-04-03 20:21:27 Arbel

回答

相關問題