Question

我想使用W3.CSS创建一个固定的顶栏，在创建侧栏时调整大小。

这里的代码显示了我想要的顶栏的两个属性（也是JSFiddle形式）：

<!DOCTYPE html>
<html>

<head>
  <title>W3.CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <div class="w3-sidebar w3-light-grey w3-animate-left" style="width: 180px; display: none; box-shadow: none;" id="mySidebar">
    <div class="w3-bar-block">
      <a class="w3-bar-item w3-button w3-black" href="#">Home</a>
      <a class="w3-bar-item w3-button" href="#">About</a>
      <a class="w3-bar-item w3-button" href="#">Contact</a>
      <a class="w3-bar-item w3-button" href="#">Support</a>
    </div>
  </div>

  <div id="main" style="margin-left: 0px;">

    <div class="w3-top">
      <div class="w3-bar w3-red">
        <div title="close Sidebar" id="toggleNav" class="w3-bar-item w3-button" onclick="w3_toggle()">☰</div>
        <a class="w3-bar-item w3-button w3-right">RIGHT</a>
      </div>
    </div>

    <br>
    <br>

    <div class="w3-card">
      <div class="w3-bar w3-blue">
        <div title="close Sidebar" id="toggleNav" class="w3-bar-item w3-button" onclick="w3_toggle()">☰</div>
        <a class="w3-bar-item w3-button w3-right">RIGHT</a>
      </div>
    </div>

    <br>
    <br>

    <div class="w3-container">
      <h2>Fixed Top Navigation</h2>
      <ul>
        <li><h3>Scroll to see the red bar stay.</h3></li>
        <li><h3>Click/Reclick the (either) hamburger to see the blue bar resize.</h3></li>
      </ul>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <p>Bottom of page</p>
    </div>

  </div>

  <script>
    function w3_open() {
      document.getElementById("main").style.marginLeft = "180px";
      document.getElementById("mySidebar").style.width = "180px";
      document.getElementById("mySidebar").style.display = "block";
    }
    function w3_close() {
      document.getElementById("main").style.marginLeft = "0";
      document.getElementById("mySidebar").style.display = "none";
    }
    function w3_toggle() {
      x = document.getElementById("toggleNav");
      if (x.title == "close Sidebar") {
        w3_open();
        x.title = "open Sidebar";
      } else if (x.title == "open Sidebar") {
        w3_close();
        x.title = "close Sidebar";
      }
    }
  </script>

</html>

在那个例子中，

红色条保持固定在滚动上;
当侧边栏出现时，蓝色栏会调整大小。

我想要一个同时执行这两项工作的栏：保持固定在顶部，并在侧边栏出现时调整大小。

这可能与W3.CSS有关吗？或者我是否必须分支并编写实际的CSS？

Answer 1

使用position:sticky：https://developer.mozilla.org/en-US/docs/Web/CSS/position

<div class="w3-top" style="position:sticky">

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>W3.CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <div class="w3-sidebar w3-light-grey w3-animate-left" style="width: 180px; display: none; box-shadow: none;" id="mySidebar">
    <div class="w3-bar-block">
      <a class="w3-bar-item w3-button w3-black" href="#">Home</a>
      <a class="w3-bar-item w3-button" href="#">About</a>
      <a class="w3-bar-item w3-button" href="#">Contact</a>
      <a class="w3-bar-item w3-button" href="#">Support</a>
    </div>
  </div>

  <div id="main" style="margin-left: 0px;">

    <div class="w3-top" style="position:sticky">
      <div class="w3-bar w3-red">
        <div title="close Sidebar" id="toggleNav" class="w3-bar-item w3-button" onclick="w3_toggle()">☰</div>
        <a class="w3-bar-item w3-button w3-right">RIGHT</a>
      </div>
    </div>

    <br>
    <br>

    <div class="w3-card">
      <div class="w3-bar w3-blue">
        <div title="close Sidebar" id="toggleNav" class="w3-bar-item w3-button" onclick="w3_toggle()">☰</div>
        <a class="w3-bar-item w3-button w3-right">RIGHT</a>
      </div>
    </div>

    <br>
    <br>

    <div class="w3-container">
      <h2>Fixed Top Navigation</h2>
      <ul>
        <li>
          <h3>Scroll to see the red bar stay.</h3>
        </li>
        <li>
          <h3>Click/Reclick the (either) hamburger to see the blue bar resize.</h3>
        </li>
      </ul>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <p>Bottom of page</p>
    </div>

  </div>

  <script>
    function w3_open() {
      document.getElementById("main").style.marginLeft = "180px";
      document.getElementById("mySidebar").style.width = "180px";
      document.getElementById("mySidebar").style.display = "block";
    }

    function w3_close() {
      document.getElementById("main").style.marginLeft = "0";
      document.getElementById("mySidebar").style.display = "none";
    }

    function w3_toggle() {
      x = document.getElementById("toggleNav");
      if (x.title == "close Sidebar") {
        w3_open();
        x.title = "open Sidebar";
      } else if (x.title == "open Sidebar") {
        w3_close();
        x.title = "close Sidebar";
      }
    }
  </script>

</html>

＆＃13;

W3.CSS固定顶部栏调整大小

1 个答案: