javascript - 替代按位置动画的侧 slider

Question

我正在使用一个 div，它会在您单击时滑出。

下面是我想要实现的一些图片:

这是 Div，默认折叠

这是滑出后的Div(高亮显示)

这是更改屏幕尺寸后发生的情况。可点击的 div 出现在内容的后面我希望避免。

我的 Div 的 CSS:

.sliderDiv {
    z-index: -10;
    position: relative;
    left:  200px;
    width: 240px;   
}

我使用此命令在单击时将其滑出:

slideItOut:function(){
            var divsize=$(".sliderDiv").offset().left-150;
            if(divsize>100){
                $(".sliderDiv").animate({
                    "left":"-=194px"
                },"slow");
            }
            else{
                $(".sliderDiv").animate({
                "left":"+=194px"
                },"slow");
            }
        }

问题是当你调整大小时，它根本没有响应，而且 div 实际上隐藏在其他内容后面。也许这种方法不应该是响应式的。

有没有办法让相同的“ slider ”响应或至少在屏幕尺寸改变时保持其位置？我想知道有什么方法可以调整窗口或屏幕的大小，并且 div 与前两个图像保持在同一区域。

此外，这是在模态中实现的。所以它不完全在屏幕的固定区域。

Answer 1

我认为，如果没有您的完整源代码，它就无法解决。您应该提供其源代码或放在某个地方。然后，我尝试修复。或者，我可以提供最佳方式