關於在添加和刪除兩個類之間添加動畫的問題

Question

您可以看看這個演示，並讓我知道爲什麼我無法在添加和刪除兩個類之間生成平滑過渡（類似Smooth Scroll）fixed-top和fixed-bottom而我已經添加了以下css角色？

-webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease; 
    -o-transition: all 3s ease; 
    transition: all 3s ease; 

var lastScrollTop = 0; 
 
$(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
    if (st > 500) { 
 
     $('.box').removeClass("fixed-bottom").addClass("fixed-top"); 
 
    } 
 
    } else { 
 
    if (st < 500) { 
 
     $('.box').removeClass("fixed-top").addClass("fixed-bottom"); 
 
    } 
 
    } 
 
    lastScrollTop = st; 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 2000px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #777; 
 
} 
 

 
.fixed-top { 
 
    position: fixed; 
 
    top: 0; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
} 
 

 
.fixed-bottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box fixed-bottom"></div> 
 
</div>

可以請你讓我知道什麼是做到這一點的最好辦法（具有平滑地上下移動）？

Answer 1

因爲您沒有在.fixed-top內設置底部值，並且在.fixed-bottom內設置了頂部，所以條紋會上下跳動，那麼過渡點文本將無法實現至少需要翻譯的屬性。你需要讓window.height（）正確轉換。你可以使用jQuery做到這一點，讓至極你的CSS短 看片段

var lastScrollTop = 0; 
 
var y = $(window).height() - $('.box').height() + "px"; 
 
$('.box').css("top", y); 
 
$(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
    if (st > 500) { 
 
     $('.box').css("bottom", y); 
 
     $('.box').css("top","0"); 
 
    } 
 
    } else { 
 
    if (st < 500) { 
 
     $('.box').css("top", y); 
 
     $('.box').css("bottom","0"); 
 
    } 
 
    } 
 
    lastScrollTop = st; 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 2000px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    background: #777; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box fixed-bottom"></div> 
 
</div>