Question

我在页面顶部有一个固定位置菜单栏，可以说是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;
}

Answer 1

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

Answer 2

你不能在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';
  });
}

如果你需要test whether the element is hidden，你的标题暗示：

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';
  });
}

Answer 3

实现这一点的方法是通过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函数。

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

3 个答案: