Javascript 如果存在叠加（元素为显示：块），则向下推下方的元素

我在我的网站上有一个很大的覆盖层——由

popfify.js

提供支持，覆盖层通过一个点击功能绑定“

display:block'（这是我的理解）到默认元素
display:none本质上是一个简单的显示/隐藏。但是下面的内容是重叠的。这是一个较长的垂直页面，我正在尝试添加一个条件，将get重叠的元素推到重叠的下面，使其向下（
页边距顶部：300px；
）

但如果

.sDetails2

不再显示：块；移除
页边距顶部：300px

下面的元素：

.verticallparallaxwrapper section.content-guide { 
        margin-top: 300px; // add if .sDetails2 is display: block
}

听起来您可以使用jQuery的.slideToggle（）来实现这一点。大概是吧

JS

编辑

对于保证金固定：

CSS

JS

不幸的是，如果没有jQuery，这个简单的解决方案只有在实际的内联样式属性是要设置的属性时才起作用：

style="display:block;"

如果显示是通过类名和相关CSS规则设置的，它将不起作用

var myOverlay = document.getElementsByClassName('sDetals2')[0];
var movingElement = document.getElementsByClassName('content-guide')[0];
var displayCheck = myOverlay.style.display;

if(displayCheck == 'block'){
   movingElement.style.margin = '300px 0 0 0';
}
else{
   movingElement.style.margin = '0';
}

听起来你应该只使用jQuery的.slideToggle（）或类似的东西，而不是一个与你试图实现的目标相反的插件。当然，如果我最初构建了这个网站的话！如果它是一个覆盖，你为什么要让用户访问它下面的内容呢。。。去掉它，使用我在回答中提出的jQuery的三行：）为什么不使用相对位置，这样当弹出窗口显示时，它会将下一个元素推到页面的下方？因此，我改为.slideToggle，问题仍然存在（但现在是滑入！）@nooneknower知道问题的哪一部分仍然存在？下部不动了？是的。这是一个相当广阔的网站。。。我现在试着写一个函数，一个if条件到margin-top@Nooneknows好吧，听起来好像有什么我看不到的东西在起作用。但我已经更新了我的答案，有些东西应该对你有用。它在第二个元素上切换一个类，该类在弹出窗口显示/隐藏时添加/删除
margin top:300px
。@没有人知道，我猜另一个元素没有移动，因为它的位置不是
position:relative
。否则，您可以完全放下边距部分，当它滑出时，它将相对于其上方的元素移动。
$('#whatevertriggerspopup').on('click', function() {
    $('#thepopup').slideToggle();
    $('#thethingbelowthepopup').toggleClass('.toggle-margin');
});

style="display:block;"

var myOverlay = document.getElementsByClassName('sDetals2')[0];
var movingElement = document.getElementsByClassName('content-guide')[0];
var displayCheck = myOverlay.style.display;

if(displayCheck == 'block'){
   movingElement.style.margin = '300px 0 0 0';
}
else{
   movingElement.style.margin = '0';
}