Question

当用户滚动浏览子菜单底部时，以下代码会使左上方菜单栏滚动到视图中。

我遇到的问题是在滚动到视图后将菜单更改为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
            });
        }

    });
}
});

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

Answer 2

当我理解你的问题时......你想要在修复命题后修复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
            });
        }

    });
}
});

jQuery Animate SlideDown然后修复

2 个答案: