How do I position an element in middle of a page and then make it sticky and go to top?-CodePudding

I am trying to position a search bar in the middle of the page, there are no elements above it, but when we are about to scroll past it, I want it to stick to the top of the page.

The web app is being developed using REACT, not allowed to use JQuery.

Example:

On opening the website, this is the position it should be in

Scrolling down:

When the search bar reaches the top, it sticks to it:

Here's a bit of what I have tried:

.searchLink {
  flex-grow: 1;
  margin: 11px auto 11px auto;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--matterColorNegative);
  border: 1px solid #dddddd;
  border-radius: 50px;
  height: 50px;
  background-color: #ffffff;
  position: sticky;
  top: 0px;
  justify-content: center;

  @media (--viewportLarge) {
    max-width: 700px;
    padding-left: 0;
  }

I am not sure how to position it in the middle of the page without any elements on top of it. The result of the current code makes the search bar appear on top of the page.

I am a new web developer, just learning CSS. Please guide me.

CodePudding user response：

You could try something like this with a bit of jquery code

window.addEventListener('load', function(){
  var dinamicHeight = (window.innerHeight/2) - document.getElementById("myStickyBar").offsetHeight;
  
  document.getElementById("myMargin").style.height = dinamicHeight   "px"; 
}, false );

#myStickyBar {
  height: 50px;
  width: 100%;
  background-color: red;
  position: sticky;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 700px; width:100%;">
  <div id="myMargin"></div>
  <div id="myStickyBar" style="">
    
  </div>
</div>

CodePudding user response：

You will have to use JavaScript to see if you scrolled past the element. A possible implementation could look like this:

<script>
    let initialPosition = null;

    window.addEventListener('scroll', (e) => {
        const searchbar = document.querySelector('.seachbar');

        if (initialPosition && (window.scrollY < initialPosition)) {
            searchbar.classList.remove('sticky-top');
        } else if (window.scrollY > (searchbar.offsetTop - searchbar.offsetHeight)) {
            if (!initialPosition) {
                initialPosition = searchbar.offsetTop - searchbar.offsetHeight;
            }
            searchbar.classList.add('sticky-top');
        }
    });
</script>

You need to check whether you have scrolled past the element anytime you scroll, so you need to attach an event listener to the window's scroll event. Then you can use "window.scrollY" to check how far the user scrolled down and compare that to the element's offset from the top of the page "element.offsetTop" and the element's height "element.offsetHeight".

Then it is simply a matter of adding/removing a CSS class to the element with "position: fixed".

You will have to adjust the selectors to match your code, for this implementation I used this sample CSS and HTML:

<style>
    * { margin: 0; padding: 0; }

    .search-container {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: calc(50vh - 50px);
    }
    
    .seachbar {
        width: 500px;
        height: 50px;
        border: 1px solid black;
    }
    
    .sticky-top {
        position: fixed;
        top: 25px;
    }
    
    .other-content {
        height: 100vh;
    }
</style>

<div class="search-container">
    <div class="seachbar">
        Search
    </div>
</div>

<div class="other-content"></div>