CSS如果元素可见，则更改主体边距大小

2018-06-29 22:52:27

我在页面顶部有一个固定的位置菜单栏（可以说）50px高，身体也有50px的顶部边距。在菜单栏上方，可能会有一个错误消息，其高度可能会有所不同。这种变化意味着身体的上边缘需要相应地改变。

我想避免在这里使用javascript，但如果这是不可能的，我会用它作为最后的手段。

http://subjectplanner.co.uk/Me/是该页面的一个例子。如果你点击错误信息，它将消失，这就是页面的外观。

HTML代码：

<div id="NavWrapper">
    <div id="NavErrorWrapper" class="Notification">
        <div id="NavError">You must be logged in!</div>
    </div>
    <div id="NavBar">
        <a href="/index" id="NavLogo"><img src="logo.png" /></a>
        <div class="HideIfJavaOff"><a href="#" id="NavMenu"><img src="menu.png" /></a></div>
        <div class="MenuClear"></div>
        <!-- MENU LIST HERE -->
    </div>
</div>
<!-- End Floating Navigation Bar -->
<!-- Responsive Wrapper -->
<div id="MainWrapper">
    <!-- CONTENT HERE -->
</div>
</body>

CSS代码：

#NavWrapper{
    width: 100%;
    z-index: 1;
    top: 0;
    position: fixed;
    height:70px;
}
#NavErrorWrapper{
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 7px;
    background-color: rgb(255, 148, 148);
    border-bottom-style: solid;
    border-bottom-color: rgb(252, 88, 88);
    border-bottom-width: 3px;
    display: block;
}
#NavError{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
#NavBar{
    overflow: hidden;
    display: block;
    width: inherit;
    max-width: 900px;
    z-index: 2;
    height:auto;
    margin: 0 auto;
    background-color: #fff;
}

我不认为只有CSS解决方案就是你将会在这里得到的，就充分动态和让你的内容按比例适合而言。对于最少量的JavaScript，当触发错误时，我会在主体上切换一个类，在错误被移除后被删除。然后在CSS中，您可以应用必要的填充/转换/任何以保持适当的比例。

你不能在CSS中遍历DOM，因此你需要JS。您可以使用以下内容：

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
  document.body.style.marginTop = '115px';
}

检查是否存在错误消息。如果是这样，请修改余量。尽管如此，假定错误消息将始终是相同的高度。如果它有一个动态高度，你将不得不计算它，然后像这样将它添加到80px ：

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}

如果元素被点击并因此被隐藏，只需使用以下内容将边距返回到80px ：

if(errorMessage) {
  errorMessage.addEventListener('click',function(){
    document.body.style.marginTop = '80px';
  });
}

如果您需要测试该元素是否隐藏，如标题所示：

function isHidden(el) {
  if (el.offsetParent === null) {
      return true;
  }
  return false;
}

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage && !isHidden(errorMessage)){
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}

if(errorMessage) {
  errorMessage.addEventListener('click',function(){
    document.body.style.marginTop = '80px';
  });
}

实现这一点的方法是通过javascript和css的组合让我们假设我们将使用您目前实现的所有css。

对于css部分，我们将使用一个名为'errorReveal'的新类，并且我们将根据是否希望显示错误来将它附加到navWrapper div。

.errorReveal {
    transform: translate3d(0,45px,0);
    -webkit-transform: translate3d(0,45px,0);
    -moz-transform: translate3d(0,45px,0);
    -ms-transform: translate3d(0,45px,0);
    -o-transform: translate3d(0,45px,0);
}

45px应该调整到你的错误信息的大小。

以下是更改对象类的快速函数，将用于添加此类。

var togClass ( obj, class ) {

     if( obj.className.search( class ) == -1 ) {

        obj.className += class;

    } else {

        obj.className.replace( class, "");

    }

}

接下来很容易决定何时使用此功能。

var elNavWrapper = document.getElementById("NavWrapper");
var someErrorCheckFunction( fakeArg){
    //Checkin some stuff
    //checkin some other stuff
    var error = true;
    if(error){
        togClass( elNavWrapper, "errorReveal" );
    }
}

那么只需将一个点事件添加到errorMessage中即可关闭该类

var elErrorWrapper = document.getElementById("NavErrorWrapper");
elErrorWrapper.addEventListener( "mousedown", function(){
    togClass( elNavWrapper, "errorReveal" );
});

而且应该这样做。祝你好运！

PS。为了动态调整大小，你需要使用javascript来获取ErrorWrapper的offsetHeight，然后使用javascript来更改transform属性，该函数将替换togClass函数。

链接地址: http://www.djcxy.com/p/83583.html

上一篇: CSS Change body margin size if an element is visible

下一篇: Selenium 3.0.1 with safaridriver failing on waitForElementVisible()