创建侧边栏和内容容器，共享滚动，侧边栏粘贴到顶部和底部

r6vfmomb 于 2022-09-18 发布在 Java

关注(0)|答案(1)|浏览(117)

我正在尝试创建一个带有侧栏容器和内容容器的布局，其中它们都是溢出的，当您滚动页面时，它会同时滚动这两个容器。滚动时，侧边栏应对齐屏幕的顶部/底部。这有点难解释，但它在这个页面上完美地实现了：https://www.kiwi.com/sv/sok/results/lulea-sverige/stockholm-sverige

实现这一目标的最佳方式是什么？我正在尝试为侧边栏顶部|中间|底部创建状态，其中中间是相对的，顶部和底部是固定的。尝试使用交叉点API和Scroll事件来检测我们所处的状态。但由于性能原因，我不确定使用Scroll Event是不是最佳选择。

以下是我实现它的尝试：https://codesandbox.io/s/vue-2-playground-forked-wsm9gd?file=/src/components/SidebarAndContent.vue

它的工作不是很好，我想要一些投入的最好的方式来做到这一点。谢谢!

JavaScript

来源：https://stackoverflow.com/questions/73745405/creating-a-sidebar-and-content-container-that-share-scroll-with-sidebar-sticking

1条答案

按热度按时间

m1m5dgzv1#

如果我没弄错的话，这应该可以解决你的问题。

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Sidebar</h2>
  <p>This sidebar is of full height (100%) and always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>

`

赞(0）回复(0）举报 2022-09-18

我来回答

创建侧边栏和内容容器，共享滚动，侧边栏粘贴到顶部和底部

1条答案

相关问题

热门标签

最新问答