Kode untuk membuat posisi box pencarian agar tetap di atas

fixed-search-menu

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div> 

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s