CSS Position 粘性不适用于所有 Div

Question

我正在研究我的一个项目，为此我想让搜索栏变得粘稠，因为我编写了一个 JS 代码，但问题是搜索栏似乎只在“上下文部分”上粘着，它没有在“侧边栏和页脚”上粘贴/工作。 我想在 OffSet 之后让它粘在整个身体上。

我也试过“位置：固定；” 而不是“位置：粘性；” 并且它在固定的 position 中工作正常，但在固定的 position 中，搜索栏会出现在身体之外（即使“溢出：隐藏；”不起作用），这就是我使用粘性 Z4757FE07FD492A38BE0EA6A760EDZ6 的原因。

我该如何解决这个问题？

 const searchBAR = document.querySelector('.search-bar'); let navTop = searchBAR.offsetTop; function stickySearchBar() { if (window.scrollY >= navTop) { searchBAR.classList.add('fixed'); } else { searchBAR.classList.remove('fixed'); } } window.addEventListener('scroll', stickySearchBar);

 .search-bar { width: 100%; position: relative; display: flex; }.search-term { width: 100%; max-height: 36px; border: 3px solid black; border-right: none; padding: 5px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF; }.search-term:focus { color: black; }.search-btn { width: 40px; height: 36px; border: 1px solid black; background: black; text-align: center; color: #fff; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; }.fixed { position: sticky; top: 0; } main.content-section, main.sidebar-section { background-color: skyblue; padding: 15px; height: auto; }.main-section { margin: 0 auto; display: grid; grid-gap: 0px; grid-template-columns: 70% 30%; } @media (max-width: 600px) {.main-section { grid-template-columns: 100%; } }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="main" style="width: 400px;"> <header style="width: 100%; height:200px; background-color: skyblue;"> HEADER SECTION </header> <div class="main-section"> <div class="content-section"> <div class="search-bar"> <input type="text" class="search-term" placeholder="Search Here..."> <button type="submit" class="search-btn"> <i class="fa fa-search"></i> </button> </div> <div style="width: 100%; height: 1000px; background-color: pink;"> CONTENT SECTION </div> </div> <div class="sidebar-section"> <div style="width: 100%; height:1000px; background-color: yellow;"> SIDE-BAR SECTION </div> </div> </div> <footer style="width: 100%; height:200px; background-color: blue;"> FOOTER SECTION </footer> </div>

Answer 1

您可以将search-bar放在最外面的 div 中，以便它可以包含header和footer

 const searchBAR = document.querySelector('.search-bar'); let navTop = searchBAR.offsetTop; function stickySearchBar() { if (window.scrollY >= navTop) { searchBAR.classList.add('fixed'); } else { searchBAR.classList.remove('fixed'); } } window.addEventListener('scroll', stickySearchBar);

 .search-bar { width: 100%; position: relative; display: flex; }.search-term { width: 100%; max-height: 36px; border: 3px solid black; border-right: none; padding: 5px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF; }.search-term:focus { color: black; }.search-btn { width: 40px; height: 36px; border: 1px solid black; background: black; text-align: center; color: #fff; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; }.fixed { position: sticky; top: 0; } main.content-section, main.sidebar-section { background-color: skyblue; padding: 15px; height: auto; }.main-section { margin: 0 auto; display: grid; grid-gap: 0px; grid-template-columns: 70% 30%; } @media (max-width: 600px) {.main-section { grid-template-columns: 100%; } }

 <div class="main" style="width: 400px;"> <div class="search-bar"> <input type="text" class="search-term" placeholder="Search Here..."> <button type="submit" class="search-btn"> <i class="fa fa-search"></i> </button> </div> <header style="width: 100%; height:200px; background-color: skyblue;"> HEADER SECTION </header> <div class="main-section"> <div class="content-section"> <.-- <div class="search-bar"> <input type="text" class="search-term" placeholder="Search Here..:"> <button type="submit" class="search-btn"> <i class="fa fa-search"></i> </button> </div> --> <div style="width; 100%: height; 1000px: background-color; pink:"> CONTENT SECTION </div> </div> <div class="sidebar-section"> <div style="width; 100%: height;1000px: background-color; yellow:"> SIDE-BAR SECTION </div> </div> </div> <footer style="width; 100%: height;200px: background-color; blue;"> FOOTER SECTION </footer> </div>