Question

当你滚动它时，我试图让一个徽标出现在导航栏中并且它固定在页面的顶部并且似乎工作正常，但是当试图反转动画时，它表现得很奇怪。

$(document).ready(function() {
    $(document).scroll(function () {
        var scroll = $(this).scrollTop();
        if (scroll > 174) {
            $('#navbar').css({"position":"fixed","top":"0","margin-top":"0"});
            $('section').css({"margin-top":"48px"});
            $('#logo_navbar').animate({"opacity": "1","width": "114px"}, 200);
        } else {
            $('#navbar').css({"position":"relative","margin-top":"-4px"});
            $('section').css({"margin-top":"0"});
            $('#logo_navbar').css({"opacity": "0","width": "0px"});
        }
    });
});

（问题在于#logo_navbar动画）。

这是一个演示： JSFiddle

Answer 1

它表现得很奇怪？你是什么意思？我相信你提到隐藏得太快的徽标，如果是这样，那么你的问题是你没有在你的else语句中执行动画，应该如下：

$(document).ready(function () {
     $(document).scroll(function () {
         var scroll = $(this).scrollTop();
         if (scroll > 174) {
             $('#navbar').css({
                 "position": "fixed",
                 "top": "0",
                 "margin-top": "0"
             });
             $('section').css({
                 "margin-top": "48px"
             });
             $('#logo_navbar').animate({
                 "opacity": "1",
                 "width": "114px"
             }, 200);
         } else {
             $('#navbar').css({
                 "position": "relative",
                 "margin-top": "-4px"
             });
             $('section').css({
                 "margin-top": "0"
             });
             $('#logo_navbar').stop().animate({
                 "opacity": "0",
                 "width": "0px"
             }, 200);
         }
     });
 });

http://jsfiddle.net/6nkgcqbf/1/

jQuery动画进入但没有回归

1 个答案: