Having a prominent search box is a very important part of the web design. There are many different ways you can implement a search box on your website. In this tutorial we are going to design a full width and responsive search box which stick at the top of the window when the user scrolls through the page giving the user ability to search from anywhere on the page. Here is an example.

View Demo

To implement this, let’s start with the simple html first.

HTML

<div class="header">Header</div>
<input type="text" class="sticky-search" placeholder="Search Website" />
<div class="bodyarea"></div>   

Now let’s go ahead and style the elements with the following simple css.

CSS

html
{
	font-size: 14px;
}
.header
{
	background: #27ae60;
	color: #fff;
	font-size: 3rem;
	height: 200px;
	padding-top: 2rem;
	text-align: center;
	width: 100%;
}
.sticky-search
{
	background: #f2f2f2;
	border: 1px solid #ccc;
	box-sizing: border-box;
	webkit-box-sizing: border-box;
	moz-box-sizing: border-box;
	outline: none;
	padding: 1.5rem;
        display: block;
	font-size: 1.5rem;
	width: 100%;
}
.bodyarea
{
	display: block;
	height: 2000px;
	width: 100%;
}

The following simple jquery helps to stick the search box when the user scrolls past the header (height 200px). The height could change based on your own website.

jQuery


$(window).scroll(function() {
 if ($(window).scrollTop() > 200 ) {
        $('.sticky-search').css({'position' : 'fixed', 'top' : 0});
    } else {
        $('.sticky-search').css({'position' : 'relative', 'top' : 'none'});
    }
});