Question

我正在设计一个投资组合网站，并希望在单击投资组合时将我的工作向上滑动到屏幕上，就像单击菜单图标时导航栏在上面滑动一样。我拥有的代码适用于左右两侧的导航栏，但对于底部，即使高度为0，它仍会显示该块

不幸的是，使用display：none并使用jquery将其更改为display：block会删除滑动到屏幕上的平滑动画。

html

        <div id="portfolionav" class="portfolionav">
            <a href="javascript:void(0)" class="closebtn" 
             onclick="closeNav2()">&#9755;</a>
            <a href="#">testing</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>

        <div id=bottom>
            <h1 onclick="openNav2()">PORTFOLIO</h1>
        </div>

css

        .portfolionav {
           height: 0;
           width: 100%;
           position: fixed;
           z-index: 3;
           bottom: 0;
           background-color: #111;
           overflow-x: hidden;
           transition: 0.5s;
           padding-top: 60px;
           display: block;
        }

        .portfolionav a {
           padding: 8px 8px 8px 32px;
           text-decoration: none;
           font-size: 25px;
           color: #818181;
           display: block;
           transition: 0.3s;
        }

        .portfolionav a:hover {
           color: #f1f1f1;
        }

        .portfolionav .closebtn {
           position: absolute;
           bottom: 25px;
           right: 75px;
           font-size: 36px;
           writing-mode: vertical-rl;
        }

javascript

        function openNav2() {
            document.getElementById("portfolionav").style.height = "100vh";
        }

        function closeNav2() {
            document.getElementById("portfolionav").style.height = "0";
        }

Answer 1

使用显示：无，而不是高度。

Answer 2

一旦投资组合div固定，您就可以使用 top 属性，而不用按照高度来控制动画。您还必须将默认高度设置为100vh。

因此您的portfolionav应该是：

.portfolionav {
       height: 100vh;
       width: 100%;
       position: fixed;
       z-index: 3;
       top: 100vh;
       background-color: #111;
       overflow-x: hidden;
       transition: 0.5s;
       padding-top: 60px;
       display: block;
}

以及您的JavaScript函数：

function openNav2() {
  document.getElementById("portfolionav").style.top = "0";
}

function closeNav2() {
  document.getElementById("portfolionav").style.top = "100vh";
}

现在，您只需要根据需要调整手动按钮即可。

Answer 3

您可以组合height和paddingTop进行显示和隐藏导航，因为设置height:0px;时会显示填充

function openNav2() {
debugger;
    document.getElementById("portfolionav").style.height = "100vh";
    document.getElementById("portfolionav").style.paddingTop = "60px";
}

function closeNav2() {
    document.getElementById("portfolionav").style.height = "0";
    document.getElementById("portfolionav").style.paddingTop = "0";
}

 .portfolionav {
     height: 0;
     width: 100%;
     position: fixed;
     z-index: 3;
     bottom: 0;
     background-color: #111;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 0px;
     display: block;
  }

  .portfolionav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: #818181;
     display: block;
     transition: 0.3s;
  }

  .portfolionav a:hover {
     color: #f1f1f1;
  }

  .portfolionav .closebtn {
     position: absolute;
     bottom: 25px;
     right: 75px;
     font-size: 36px;
     writing-mode: vertical-rl;
  }

        <div id="portfolionav" class="portfolionav">
            <a href="javascript:void(0)" class="closebtn" 
             onclick="closeNav2()">&#9755;</a>
            <a href="#">testing</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>

        <div id=bottom>
            <h1 onclick="openNav2()">PORTFOLIO</h1>
        </div>

0高度的导航栏仍然可见？

3 个答案: