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

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">

<!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>

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

W3.CSS Fixed Top Bar that Resizes

css

w3.css