1

页面上有元素：

#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像这样，我希望它停止浮动。

4

0 回答 0