間隔不起作用的jQuery動畫

Question

基本上，我希望我的代碼可以使菜單動畫到屏幕之外，因此滾動顯示-50px。 並且當不滾動動畫時返回。

這是我到目前為止的代碼。 但是它僅在每次刷新瀏覽器時才起作用。

var $menu = $(".sticky-nav");
var topAnim = $menu.css("top");
var scrollStopped;

var fadeInCallback = function () {
    if (typeof scrollStopped != 'undefined') {
        clearInterval(scrollStopped);
    }

    scrollStopped = setTimeout(function () {
        $( ".sticky-nav" ).animate({
   top: "20px"
  }, 300);
});
}

$(window).scroll(function () {
    if (!$menu.is(":animated") && topAnim == "20px") {
                $( ".sticky-nav" ).animate({
   top: "-50px"
  }, 300);

    } else {
        fadeInCallback.call(this);
    }
});

jsfiddle.net/B997S

Answer 1

我在您的代碼中發現2個問題。

Replaced topAnim in the below line with $menu.css("top") as topAnim always returned a constant.

if (!$menu.is(":animated") && $menu.css("top") == "20px") {

Next issue was

scrollStopped = setInterval(function () { // this is the right format

請檢查以下鏈接

http://jsfiddle.net/kapilgopinath/B997S/1/