CSS Position Sticky Is Not Working For All Divs

Gupa Dutta 0
Viewed 40

I'm working on one of mine project and for that I want to make the Search Bar sticky for that I've written a JS code but the problem is that the Search Bar is appear to be sticky on the "Context Section" only, It's not sticking/ working on "Sidebar & Footer". I want to make it sticky for complete body after the OffSet.

I have also tried the "position: fixed;" instead of "position: sticky;" and It's working fine in fixed position but in fixed position the Search Bar goes outside the body (Even with "overflow: hidden;" not working) that's why I'm using the sticky position.

How can I fix this issue?

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>

sticky javascript css
1 Answers

you can put the search-bar in the outermost div so that it can include the header and 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>

arsyaadi0
Related