html 我怎样才能把我的粘滞侧边导航在我的部分，但使它可滚动的所有部分？

68bkxrlz 于 2022-11-20 发布在其他

关注(0)|答案(3)|浏览(144)

我想要一个粘性的侧导航。我有三个部分，并把NEV在我的第一部分，但它只是坚持到第一部分结束。
于飞：

<body>
    <div id="sections">
        <div class="section" id="section1">
            <nav id="my-navigation">
                <div id="container">
                    <li><a href="">Start.</a></li>
                    <li><a href="">My work.</a></li>
                    <li><a href="">Skills.</a></li>
                    <li><a href="">Education.</a></li>
                </div>
            </nav>
        </div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
    </div>
</body>

CSS：

* {
    font-size: 16px;
    margin: 0;
}

.section{
    width: 100%;
    height: 100vh;
}

#section1 {
    background-color: grey;
}

#section2 {
    background-color: aquamarine;
}

#section3 {
    background-color: brown;
}

#my-navigation {
    display: inline-block;
    position: sticky;
    height: 75vh;
    top: calc(25vh/2);
    left: 30px;
    border-left: 2px solid #000;
}

#container {
    display: flex;
    height: inherit;
    flex-direction: column;
    justify-content: space-around;
}

#container > li {
    list-style: none;
    margin-left: 1rem;
}

我已经尝试将导航放在第一部分之前，如下所示：

<body>
    <div id="sections">
        <nav id="my-navigation">
            <div id="container">
                <li><a href="">Start.</a></li>
                <li><a href="">My work.</a></li>
                <li><a href="">Skills.</a></li>
                <li><a href="">Education.</a></li>
            </div>
        </nav>
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
    </div>
</body>

但结果却出乎我的意料。

有没有可能把导航以某种方式独立？它只是应该是粘性的整个网站。

Html

来源：https://stackoverflow.com/questions/74503499/how-can-i-place-my-sticky-side-nav-inside-my-section-but-make-it-scrollable-for

3条答案

按热度按时间

92vpleto1#

该解决方案使用Grid作为全局布局，使用Flex作为导航链接，只是为了说明如何使用这两种布局- Grid是二维的，Flex是一维的。
是的，我们也可以在这里使用Flex进行全局布局，但是使用网格有一个实用的优势：有nice tools可用于直观地创建它们。

<!doctype html>
<html>

  <head>
    <style>
      * {
        box-sizing:border-box;
        font-size: 16px;
        margin: 0;
      }

      body {
        display: grid;
        height: 100vh;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas:
          "navi content";
      }
      
        nav {
          grid-area: navi;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin: auto 30px;
          padding:0 1em;
          border-left: 2px solid #000;
          max-height: calc(100vh - 60px);
          overflow-y: auto;
        }
        
          nav a {
            display:block;
          }

        main {
          grid-area: content;
          overflow-y:auto;
        }

          section {
            width: 100%;
            height: 100vh;
          }
          .s1 { background: grey; }
          .s2 { background: aquamarine; }
          .s3 { background: brown; }

    </style>
  </head>

  <body>
    <nav>
      <a href="">Start.</a>
      <a href="">My work.</a>
      <a href="">Skills.</a>
      <a href="">Education.</a>
    </nav>
    <main>
      <section class="s1"></section>
      <section class="s2"></section>
      <section class="s3"></section>
    </main>
  </body>

</html>

赞(0）回复(0）举报 2022-11-20

piwo6bdm2#

我的解决方案基本上就是使用位置：固定而非位置：粘粘的。我花了几个小时才想起有这个选项，但对我很有效。

#my-navigation {
display: inline-block;
position: fixed;
height: 75vh;
top: calc(25vh/2);
left: 30px;
border-left: 2px solid #000;}

赞(0）回复(0）举报 2022-11-20

mrphzbgm3#

主要的问题是你只是让导航栏粘在它的“部分”容器上。把它拉出来，它通常会做你想做的事情。另一个你在问题中没有提到的问题是处理白色。一个负的底边距，即视图的高度，将解决这个问题。第三个问题是确保内容不会在导航栏后面结束。我只是在section类中添加了填充。
第一个
总的来说，使用这种设计将是困难的。有这么多更好的替代方案。

赞(0）回复(0）举报 2022-11-20

我来回答

html 我怎样才能把我的粘滞侧边导航在我的部分，但使它可滚动的所有部分？

3条答案

相关问题

热门标签

最新问答