jquery - 「fixed」要素が「margin-top」と「margin-bottom」の両方のプロパティを持つことができない理由

Question

ページに要素があります:

#current_colors_container{
    position: fixed;
    margin-bottom: 70px;
    margin-top: 70px;
    width: 23%;
    left: 1.6%; }

そのままmargin-topにしておくと、上にスクロールしているときに上の要素margin-bottomが覆われず、下にスクロールしているときに下にあるページの絶対要素が覆われません。

しかし、両方のプロパティが機能せず、そのうちの 1 つ (リストの最初) のみが機能し、理由がわかりません。両方向にスクロールしているときに両方のマージンがあると予想していました。

そして、JQでそれを修正しようとしてもうまくいきません:

$(window).scroll(function(){
        if($("#current_colors_container").length>0){

            var bottom_nav=$('#bottom_nav').offset().top;
            var container_top=$("#current_colors_container").offset().top
            var color_container=container_top+$("#current_colors_container").height();


         if( bottom_nav<=color_container){
         $("#current_colors_container").css({"margin-top":"", "margin-bottom":"70px"})
         }
   }

});

純粋な CSS ソリューションはありますか? または、JS 関数をどのように修正すればよいですか?

UPD

これで、JQ 修正marginが機能します。ID CSS から削除し、クラス (関数addClassおよび を使用removeClass) を介して提供すると、このソリューションにより #container が他の要素の上または下に修正される前に「ジャンプ」(すばやくシフト) されますが、そうではありません。このまま、浮かんでやめてほしい。