Javascript jQuery动画幻灯片向下，然后修复

当用户滚动到其子菜单的底部时，以下代码会导致左上菜单块滚动到视图中

我遇到的问题是，一旦滚动到视图中，将菜单更改为“修复”。当前，它将继续在每个滚动中设置视图动画

在这里拉小提琴：

见下:

jQuery( document ).ready( function( jQuery ) { 

if ($("#autofixmenu")[0]){

var $autofixmenu   = $("#autofixmenu"),
        $bottom    = $('#categories'),
        $window    = $(document),
        offsetbtm  = $bottom.offset(),
        offset     = $autofixmenu.offset(),
        topPadding = 70;

    $window.scroll(function() {
        if ($window.scrollTop() > $autofixmenu.height() ) {
            $autofixmenu.stop().addClass('autofixed').animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $autofixmenu.stop().removeClass('autofixed').animate({
                marginTop: 0
            });
        }

    });
}
});     

---

因为我理解你的问题…你想在它进入固定状态后修复div

如果是，则必须将.animate更改为.css

请参阅下面的代码

jQuery( document ).ready( function( jQuery ) { 

if ($("#autofixmenu")[0]){

var $autofixmenu   = $("#autofixmenu"),
        $bottom    = $('#categories'),
        $window    = $(document),
        offsetbtm  = $bottom.offset(),
        offset     = $autofixmenu.offset(),
        topPadding = 70;

    $window.scroll(function() {
        if ($window.scrollTop() > $autofixmenu.height() ) {
            $autofixmenu.stop().addClass('autofixed').css({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $autofixmenu.stop().removeClass('autofixed').css({
                marginTop: 0
            });
        }

    });
}
}); 

---

下面是修改后的Javascript

jQuery(document).ready(function(jQuery) { 
    if ($("#autofixmenu")[0]){
        var $autofixmenu   = $("#autofixmenu"),
                $bottom    = $('#categories'),
                $window    = $(document),
                offsetbtm  = $bottom.offset(),
                offset     = $autofixmenu.offset(),
                topPadding = 70;

        $window.scroll(function() {
            if ($window.scrollTop() > $autofixmenu.height() ) {
                if($autofixmenu.hasClass('autofixed') === false) {
                    $autofixmenu.addClass('absolute');
                    $autofixmenu.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    }, function() {
                        $autofixmenu.removeClass('absolute').addClass('autofixed').css('margin-top', '');
                    });
                }
            } else {
                $autofixmenu.stop().removeClass('autofixed').animate({
                    marginTop: 0
                });
            }
        });
    }
});     

您还需要进行以下css更改

.autofixed {
    position: fixed;
    left: auto;
    top: 70px;
}

.absolute {
    position: absolute;
    top: auto;
    left: auto;
}

---

检查这把小提琴这是预期的行为吗？几乎，我没有看到第一个菜单被动画到视图中。如果我快速向下滚动，我希望菜单延迟滚动到视图中，然后变得固定。我已经更新了小提琴。你能再检查一下吗？我会在我的现场网站上测试它，但是蓝色框和红色框一起向下滚动。我只想让红色滚动下来。我自己也发布了一个答案。看一看，告诉我你的想法。由于某种原因，您共享的代码将错误的框放在了下面。但是我非常感谢你的帮助是的，这就是我想要的，但是我仍然想保留动画的第一个实例。我喜欢它。当它滚动到视图中时进行动画制作，然后一旦完成就变成固定位置。如果有帮助的话，你能提供答案吗。