css 当我在右边的div上下滚动时，左边的“aside”会保持粘性，有没有解决方案？

我有一个css的问题与下面的例子.假设会有一个addEventListener为每个article在JavaScript中，为用户点击它们并转到其他页面.然而，他们在这段代码中被省略了，因为它们与我的问题无关.我想问一下，如果有一些错误，在我的代码可以纠正，或者有什么解决方案可以让左边的aside变得粘滞，而我在右边的div boxes上向上或向下滚动？
谢谢你，谢谢

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

main {
  display: flex;
  margin: 1rem;
}

#a {
  text-align: center;
  margin-left: 4rem;
  margin-right: 4rem;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

article {
  height: 10rem;
  width: 12rem;
  padding: 3%;
  margin: 2rem 1rem;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5%;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-width: 0 1px 1px 0;
  vertical-align: middle;
  transition: 0.2s;
}

article:hover {
  background-color: #000000;
  color: #ffffff;
}

个字符

首先，你需要修复你的CSS，只要你的目标是.boxes，而它需要是#boxes，只要boxes是一个ID而不是一个类
现在，你需要在元素处使用Sticky position来使其具有粘性，并将top设置为0，这样它将在偏移量Top 0处保持粘性，
我做了这个片段与一些更多的编辑，如设置框的高度，并允许滚动而不移动粘性的一部分。
检查片段结果，

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

main {
  display: flex;
  margin: 1rem;
}

aside#a {
  text-align: center;
  padding-top:3rem;
  margin-left: 4rem;
  margin-right: 4rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left:0;
  bottom:0;
  height:100%;
}
/* Vertical */
#boxes {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  overflow: auto;
  max-height:100vh;
  max-width:100vw;
}

article {
  height: 10rem;
  width: 12rem;
  padding: 3%;
  margin: 2rem 1rem;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5%;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-width: 0 1px 1px 0;
  vertical-align: middle;
  transition: 0.2s;
}

article:hover {
  background-color: #000000;
  color: #ffffff;
}

个字符
只要你在行中使用flex，所以这次你可以检查列方向

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

main {
  display: flex;
  margin: 1rem;
  width:100%;
}

aside#a {
  text-align: center;
  padding-top:3rem;
  margin-left: 4rem;
  margin-right: 4rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left:0;
  bottom:0;
  height:100%;
  width:20%;
}
/* Horizontal */
#boxes {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
  max-height:100vh;
  width:55%;
}

article {
  height: 10rem;
  width: 12rem;
  padding: 3%;
  margin: 2rem 1rem;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5%;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-width: 0 1px 1px 0;
  vertical-align: middle;
  transition: 0.2s;
}

article:hover {
  background-color: #000000;
  color: #ffffff;
}

<body>
  <main>
    <aside id="a">
      <h1>abcde</h1>
    </aside>
    <div id="boxes">
      <div>
        <article>
          <h3>a</h3>
        </article>
      </div>
      <div>
        <article>
          <h3>b</h3>
        </article>
      </div>
      <div>
        <article>
          <h3>c</h3>
        </article>
      </div>
      <div>
        <article>
          <h3>d</h3>
        </article>
      </div>
      <div>
        <article>
          <h3>e</h3>
        </article>
      </div>
       <div>
        <article>
          <h3>f</h3>
        </article>
      </div>
       <div>
        <article>
          <h3>g</h3>
        </article>
      </div>
       <div>
        <article>
          <h3>h</h3>
        </article>
      </div>
    </div>
  </main>
</body>

的字符串

css 当我在右边的div上下滚动时，左边的“aside”会保持粘性，有没有解决方案？

1条答案

相关问题

热门标签

最新问答