Search Box in Content Moves to Fixed Header

Developer
Chris Coyier
Size
2,768 Kb
Views
54,648
  1. Search Box in Content Moves to Fixed Header Previews
  2. Search Box in Content Moves to Fixed Header HTML Codes
  3. Search Box in Content Moves to Fixed Header CSS Codes
  4. Search Box in Content Moves to Fixed Header JS Codes

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,648
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
Load External Data in React
SVG Filters on HTML5 Video
Voting is our Voice
256 Classes Overrides One ID
Stairway Hover Nav
Infinite Slideshow
Sticky Footer
Three-Line Menu Icon, Various Techniques
Basic Example of SVG Line Drawing, Backward and Forward
CssPanelMenu
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!