jQuery Animate SlideDown 然后 FIXED答案

【问题标题】：jQuery Animate SlideDown and then FIXEDjQuery Animate SlideDown 然后 FIXED
【发布时间】：2023-03-10 05:31:01
【问题描述】：

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

我遇到的问题是将菜单滚动到视图中后将其更改为 FIXED。目前，它继续在每次滚动时以动画形式出现在视图中。

在这里提琴：http://jsfiddle.net/GregsFiddle/rUsRz/

JS 下面：

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
            });
        }

    });
}
});

【问题讨论】：

检查这个小提琴jsfiddle.net/xATBt这是预期的行为吗？
几乎，我没有看到第一个菜单被动画化。如果我快速向下滚动，我希望菜单延迟滚动到视图中，然后变为固定。
我已经更新了小提琴。你能再检查一下吗？
我将在我的实时站点上对其进行测试，但蓝色框似乎与红色框一起向下滚动。我只希望红色向下滚动。
我自己也发布了一个答案。看看，告诉我你的想法。您共享的代码出于某种原因将错误的框放下。但我非常感谢您的帮助

标签： javascript jquery html jquery-animate

【解决方案1】：

这里是修改后的 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;
}

【讨论】：

【解决方案2】：

正如我理解你的问题......你想要修复 div 一旦它得到固定的prosition。

如果是这样，您必须将 .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
            });
        }

    });
}
});

【讨论】：

是的，这就是我想要的，但是我仍然想保留 animate 的第一个实例。当它滚动到视图中时，我希望它 .animate - 然后一旦它完成成为固定位置。
如果对您有帮助，能否请您给出答案。