如果一个元素是可见的，改变body margin的大小

CSS Change body margin size if an element is visible

本文关键字：改变 body margin 一个 元素 如果      更新时间：2023-09-26

我有一个固定位置的菜单栏在页面的顶部，这是(让我们说)50px高，主体也有50px的上边距。在菜单栏上方，可能会有一条错误消息，其高度可能不同。这种变化意味着body顶部的边距需要相应改变。

我希望在这里避免使用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'的新类，我们将根据您是否希望显示错误，将其附加到navWrapperdiv。

.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添加一个point事件来将类切换回

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

就可以了。祝你好运!

p。对于动态大小，你需要使用javascript来获取ErrorWrapper的offsetHeight使用javascript更改transform属性，该函数将取代togClass函数

相关文章：