css 堆栈小部件中的HTML Flex

7bsow1i6  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(76)

我使用HTML将小部件设置为粘性,但它并不像粘性那样工作。当滚动条向下时,小部件也会向下。我要创建的结构

Header
page sticky-page title
page-content/sticky widget

字符串
我不想以任何方式使用固定。
我想用图片展示我想做的事情。我很感激你的帮助


的数据

body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #f39c12;
  height: 60px;
  overflow: hidden;
}

.content {
  display: flex;
  flex: 1;
  overflow: auto;
}

.main-container {
  max-width: 1000px;
  margin: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sticky-element {
  position: sticky;
  top: 0;
  background-color: #ecf0f1;
}

.sticky-widget {
  position: sticky;
  top: 0;
  background-color: #3498db;
  color: #fff;
  padding: 10px;
}

.main-content {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1;
  padding: 20px;
}

.footer {
  background-color: #2ecc71;
  height: 40px;
}
<div class="flex-container">
  <!-- Header -->
  <div class="header">Header</div>
  <!-- Content -->
  <div class="content">
    <div class="main-container">
      <!-- Sticky Element -->
      <div class="sticky-element">page STİCK TİTLE</div>
      <!-- Main Content -->
      <div class="main-content">
        <div class="column">
          <!-- Content on the left side -->
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor augue vel mi congue, vel pharetra arcu bi
        </div>
        <div class="column sticky-widget">
          <!-- Example content -->
          <div>WİDGET</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

的数据

tf7tbtn2

tf7tbtn21#

解决办法!只要给予

height: 72vh; /* Adjust the value based on your design */

字符串
.sticky-widget类中。
代码如下:

body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #f39c12;
  height: 60px;
  overflow: hidden;
}

.content {
  display: flex;
  flex: 1;
  overflow: auto;
}

.main-container {
  max-width: 1000px;
  margin: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sticky-element {
  position: sticky;
  top: 0;
  background-color: #ecf0f1;
}

.sticky-widget {
  position: sticky;
  top: 0;
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  height: 72vh;
  /* Adjust the value based on your design */
}

.main-content {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1;
  padding: 20px;
}

.footer {
  background-color: #2ecc71;
  height: 40px;
}
<div class="flex-container">
  <!-- Header -->
  <div class="header">Header</div>
  <!-- Content -->
  <div class="content">
    <div class="main-container">
      <!-- Sticky Element -->
      <div class="sticky-element">page STİCK TİTLE</div>
      <!-- Main Content -->
      <div class="main-content">
        <div class="column">
          <!-- Content on the left side -->
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor augue vel mi congue, vel pharetra arcu bi Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem saepe distinctio aperiam illo aliquam enim laboriosam natus hic, blanditiis
          dicta tempore neque fuga eaque quibusdam iusto molestias inventore voluptatibus consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum inventore aspernatur tempora rem, placeat deserunt pariatur odit quaerat in fugiat perspiciatis
          nihil nisi libero laboriosam quod ad itaque nam dicta? Ipsam nulla asperiores temporibus corrupti perspiciatis autem maiores minima voluptatum sed corporis eius, expedita assumenda consequatur adipisci iste? Soluta dolorem maxime sed repellat
          corrupti rerum ipsam harum quibusdam deleniti suscipit. Labore soluta dolorum itaque quibusdam sint mollitia dicta, enim, porro, explicabo fuga adipisci voluptates? Accusantium doloribus, neque, sequi quisquam debitis obcaecati ipsa enim hic
          totam cumque perspiciatis ad deserunt vel! Eum cupiditate possimus odit nesciunt doloribus odio ex sed at, aliquid nihil quod voluptas, eaque illum, sequi suscipit ad pariatur fuga libero amet. Placeat ipsum distinctio voluptates, facere corporis
          numquam? Soluta minus culpa minima perspiciatis perferendis magni non, repellendus id pariatur quasi laborum voluptatum? Odit magnam, a fugiat beatae tenetur quisquam eaque animi possimus, quae sunt explicabo quaerat corporis blanditiis! Reiciendis
          praesentium vitae cupiditate cumque quo doloremque eum. Ullam maxime doloribus sapiente inventore perspiciatis. Ratione numquam odit commodi nostrum quam. Voluptates natus repellendus velit reprehenderit sapiente tempora sunt, ea neque! Adipisci
          optio magni sint veniam nihil natus! Consequuntur aspernatur ullam placeat. Inventore omnis eos ipsam, esse optio praesentium obcaecati, voluptas dignissimos possimus repellat nostrum culpa vitae neque cupiditate adipisci. Vel! Minima illo facere
          rem quibusdam minus quisquam, neque ipsa pariatur! Laboriosam repellendus provident dolores eius alias odio magni deserunt. Exercitationem consequatur nihil iusto! Eos iusto minima soluta nostrum fugit magni? Quisquam, maxime, molestias eum
          modi non laborum illum quis veritatis quo similique saepe sunt, numquam suscipit et. A modi fugiat maxime quod eius consectetur odit corporis? Debitis sint voluptatibus cupiditate! Quo dolore ducimus molestias error et nam fugit rerum impedit
          similique qui porro suscipit, quas sed aliquid deleniti maxime expedita nesciunt at beatae dicta sint rem ratione odit natus. Vitae. Dicta reprehenderit praesentium eum id, distinctio ipsam incidunt minus alias eos porro, rerum neque quam voluptas
          iusto magnam nostrum iste quod consequatur modi accusamus beatae ratione esse, autem sed? Eaque? Soluta nostrum magnam voluptate sed minima o ipsum natus laudantium. Voluptates temporibus non amet similique dicta. Suscipit, iure! Nemo accusamus
          alias reiciendis omnis repellendus a illo autem rerum voluptate dolor temporibus est, tempora explicabo consequuntur id!
        </div>
        <div class="column sticky-widget">
          <!-- Example content -->
          <div>WİDGET</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

的数据

请随意提出任何疑问!

相关问题