Search Box in Content Moves to Fixed Header

Developer
Chris Coyier
Size
2,768 Kb
Views
54,621

How do I make an search box in content moves to fixed header?

Based on:. What is a search box in content moves to fixed header? How do you make a search box in content moves to fixed header? This script and codes were developed by Chris Coyier on 02 July 2022, Saturday.

Search Box in Content Moves to Fixed Header Previews
IQ Test

Search Box in Content Moves to Fixed Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search Box in Content Moves to Fixed Header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Search Box in Content Moves to Fixed Header - Script Codes CSS Codes

* { 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;
}
.top-header .menu-icon { position: absolute; top: 0; right: 0; padding: 18px 20px;
}
.fix-search .top-header { background: #eee;
}
.search { position: absolute; top: 155px; left: 20px; right: 20px;
}
.search input { width: 265px; border: 1px solid #ccc; padding: 8px; font-size: 15px; -webkit-transition: width 0.2s; transition: width 0.2s; -webkit-appearance: none;
}
.fix-search .search { position: fixed; top: 10px;
}
.fix-search .search input { width: 250px;
}
.top { height: 250px; padding-top: 40px;
}
.hero { width: 200px; height: 100px; background: #ccc; margin: 0 auto;
}
main { padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
main div { width: 125px; height: 80px; background: #ccc; margin: 0 0 20px 0;
}

Search Box in Content Moves to Fixed Header - Script Codes JS Codes

var wrap = $("#wrap");
wrap.on("scroll", function(e) { if (this.scrollTop > 147) { wrap.addClass("fix-search"); } else { wrap.removeClass("fix-search"); }
});
Search Box in Content Moves to Fixed Header - Script Codes
Search Box in Content Moves to Fixed Header - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 02, 2022
Rating 4.5
Size 2,768 Kb
Views 54,621
Do you need developer help for Search Box in Content Moves to Fixed Header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Barberpole Hover Animation
A Pen by Chris Coyier
Slide in from bottom boxes
Vertical-align examples
Chriscoyier
SVG with Filters
Sticky Footer
Filtered Search RWD Pattern
Infinite Slideshow
Row and Column Highlighting with CSS Only
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!