Fixed Nav Menu With jQuery

Question

It has a navigation menu and a search entry. As you go down, the search input disappears and a search text appears in the nav menu. But I ran into a problem, it doesn't go down dynamically as I go down, how can I prevent this?

jQuery(window).scroll(function () {
  var currentScroll = $(window).scrollTop();
  if (currentScroll > 100) {
    jQuery('.header').css({position: 'fixed', top: '0'});
    jQuery('.s-icon').css('display','block');
    jQuery('.sInput').css({display: 'none'});
    jQuery('.s-icon').click(function(){
        jQuery('.sInput').css({position: 'fixed', top:'50px',display:'block'});
    });
  } else {
    jQuery('.header').css({position: 'relative'});
    jQuery('.s-icon').css('display','none');
    jQuery('.sInput').css({position: 'relative',display:'block',top:'0px'});
  }
});

body{
  height:1500px;
  
}
ul{
  display:flex;
  
}
li{
    margin-right:2%;
    list-style:none;
}
.header{
  background:#CCC;
  width:100% !important;
}
.s-icon{
  display:none;
  cursor:pointer;
}
.lorem{
  width:30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <ul>
  <li>Home</li>
  <li>Contact</li>
  <li>About Us</li>
  <span class="s-icon">Search</span>
  </ul>
</div>
<div>
<input class="sInput" type="search" placeholder="Search..">
</div>


<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum vitae dolores cumque ducimus debitis nihil itaque dolor cupiditate quis ipsum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas numquam praesentium vitae repellat qui, libero veritatis soluta doloribus rerum harum, voluptate ab et, omnis eius dicta amet dignissimos commodi. Error eligendi deserunt, minus rem eius ut quisquam aperiam, suscipit odio! Consequatur dolores nam assumenda adipisci ipsa nemo laboriosam, blanditiis, distinctio.
</div>

Thank you advance.

Answer 1

Oh, now I see. Please take a look at this to see if this is what you expected. It works just by adding a "sticky" class to the header:

var header = $('#header'),
   stickyHeight = header.offset().top;

jQuery(window).scroll(function () {
   var currentScroll = $(window).scrollTop();
            
  if (currentScroll > stickyHeight) {
   header.addClass("sticky");
  } else {
   header.removeClass("sticky");
  }
});

body {
  height:1500px;
  margin: 0;
}
ul {
  display:flex;
}
li {
  margin-right:2%;
  list-style:none;
}
#header {
  background:#CCC;
  width: 100% !important;
  height: 50px;
  padding: 25px;
}
.lorem {
width:30%;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .lorem {
  padding-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="header">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
<span class="s-icon">Search</span>
</div>

<div class="lorem">
<div>
<input class="sInput" type="search" placeholder="Search.." />
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum vitae dolores cumque ducimus debitis nihil itaque dolor cupiditate quis ipsum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas numquam praesentium vitae repellat qui, libero veritatis soluta doloribus rerum harum, voluptate ab et, omnis eius dicta amet dignissimos commodi. Error eligendi deserunt, minus rem eius ut quisquam aperiam, suscipit odio! Consequatur dolores nam assumenda adipisci ipsa nemo laboriosam, blanditiis, distinctio.
</div>