如何在内容旁边创建一个简单的粘性导航元素？

How to create a simple sticky navigation element to the side of content?

在下面的示例中，我尝试创建一个布局，其中导航将：

  1. 向下滚动时始终保持在顶部
  2. 总是在人们能够阅读的内容的左侧（不是一直在浏览器的左侧window）
  3. 防止任何 space 被实际导航元素的大小占用 

header h1 {
  text-align: center;
}

main {
  display: block;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

nav {
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  top: 0;
  right: 0;
  background-color: orange;
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

<div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
</div>

我尝试使用 right 属性（在 nav 选择器上）看看我是否可以使用它使它粘在容器中，但它里面有实际内容什么都不做。我能找到的大多数带有导航到侧面的网页往往会触及浏览器的侧面，这不是我正在寻找的解决方案，这让我很难找到解决这个问题的方法。

我想让页面看起来像什么：

版本 1：HTML / CSS

我所做的更改：

HTML: NAV 元素在 MAIN 元素中

CSS: 在 NAV 元素上设置样式 margin-left: -230px; 和 margin-bottom: -130px;

在这个版本中，如果你添加一个新的菜单项，你必须手动设置margin-bottom:

如果您希望自动完成此操作，请参阅下面的版本 2 post

header h1 {
    text-align: center;
}

main {
    display: block;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

nav {
    border: 1px solid #000;
    width: 200px;
    position: sticky;
    top: 0;
    margin-left: -230px;
    margin-bottom: -130px;
    background-color: orange;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul a {
    display: block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 5px;
}

<div class="some-container">
    <header>
        <h1>
            Some header
        </h1>
    </header>

    <main>

        <nav>
            <ul>
                <li><a href="#below">Below</a></li>
                <li><a href="#above">Above</a></li>
            </ul>
        </nav>

        <h1>
            Below is some content
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
            auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
            a. Etiam ut dignissim lacus, ut iaculis mi.
            Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
            Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
            molestie purus sodales. Vestibulum ornare ac nisl ut
            dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
            porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
            tellus quam, suscipit non enim et, pellentesque
            varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
            rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
            nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
            pellentesque accumsan. Duis maximus augue id lacus
            tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
            porttitor at faucibus ut, sodales id erat.
        </p>
        <p>
            Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
            velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
            nec cursus. Nullam ut arcu lacus. Vivamus eleifend
            ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
        </p>
        <p>
            Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
            iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
            tortor. Fusce in laoreet lacus. Cras dui sapien,
            convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
            ex.
        </p>
        <p>
            Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
            pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
            euismod orci felis sit amet neque. Maecenas fringilla
            enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
            vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
            Integer imperdiet massa eu orci faucibus
            mattis.
        </p>
        <h1 id="above">Above all</h1>
    </main>
</div>

版本 2：HTML / CSS / JS

您可以向导航添加新项目，JS 将进行必要的更改，以便导航始终显示在正确的位置。

重要：页面代码底部必须加上JS代码

var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-' + (nav.offsetHeight + 30) + 'px');

header h1 {
    text-align: center;
}

main {
    display: block;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

nav {
    border: 1px solid #000;
    width: 200px;
    position: sticky;
    top: 0;
    margin-left: -230px;
    background-color: orange;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul a {
    display: block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 5px;
}

<div class="some-container">
    <header>
        <h1>
            Some header
        </h1>
    </header>

    <main>

        <nav>
            <ul>
                <li><a href="#below">Below</a></li>
                <li><a href="#above">Above</a></li>
                <li><a href="#above">Contacts</a></li>
            </ul>
        </nav>

        <h1>
            Below is some content
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
            auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
            a. Etiam ut dignissim lacus, ut iaculis mi.
            Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
            Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
            molestie purus sodales. Vestibulum ornare ac nisl ut
            dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
            porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
            tellus quam, suscipit non enim et, pellentesque
            varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
            rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
            nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
            pellentesque accumsan. Duis maximus augue id lacus
            tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
            porttitor at faucibus ut, sodales id erat.
        </p>
        <p>
            Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
            velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
            nec cursus. Nullam ut arcu lacus. Vivamus eleifend
            ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
        </p>
        <p>
            Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
            iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
            tortor. Fusce in laoreet lacus. Cras dui sapien,
            convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
            ex.
        </p>
        <p>
            Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
            pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
            euismod orci felis sit amet neque. Maecenas fringilla
            enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
            vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
            Integer imperdiet massa eu orci faucibus
            mattis.
        </p>
        <h1 id="above">Above all</h1>
    </main>
</div>

你试试这个代码。

希望能帮到你。

我在一些 class 标签上添加位置 属性。

ex:header h1,导航。和新的 class some-container.

header h1 {
  text-align: center;
  position: absolute;
  right: 850px;
  top: 50px;
}

main {
  display: block;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

nav {
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  z-index: 100;
  top: 135px;
  left: 480px;
  background-color: orange;
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

.some-container {
  position: relative;
}

<div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
</div>

这是我的解决方案。我将 nav 和 main 包裹在一个额外的容器中，给它取名为 class some-container-inside。在 css 中，我更改了所有编辑。希望这是你需要的。

header h1 {
  text-align: center;
}

main {
  display: block;
  max-width: 500px;
  /*margin-left: auto;*/  /*delete this it*/
  /*margin-right: auto;*/ /*delete this it*/
  width: 100%;
}

main h1 {
  margin-top: 0; /*add this it*/
}

nav {
  display: table; /*add this it*/
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  top: 0;
  right: 0;
  background-color: orange;
  margin-right: 25px; /*add this it*/
  margin-left: 25px; /*add this it*/
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

.some-container-inside {
  display: flex; /*add this it*/
  justify-content: center; /*add this it*/
}

<div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <div class="some-container-inside">
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
  </div>
</div>