Question

页面上有元素：

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

如果我离开margin-top，它在向上滚动时不会覆盖上面的元素，如果我离开margin-bottom，则在向下滚动时它不会覆盖底部的绝对元素。

但是这两个属性都不起作用，只能运行其中一个（列表中的第一个），我无法理解 - 我希望它在两个方向上滚动时都有两个边距。

我尝试使用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修复工作正常，如果我从ID CSS中删除margin并通过类（使用函数addClass和removeClass）提供它，但是，此解决方案使#container'jump' （在快速移动之前）将其固定在其他元素的上方或下方，我不喜欢这样，我希望它只是停止浮动。

为什么'fixed'元素不能同时具有'margin-top'和'margin-bottom'属性

0 个答案: