Lesson 9: Add a Sticky Search Bar
In the final lesson, you'll learn to make the search bar stick to the top of the browser window. You'll use a bunch of the skills you've learned to wrap the search container in a <div> and implement a scroll function that'll fix the search bar and results to the top of the browser window no matter how far a user scrolls.
Resources
W3Schools: How to Create a Sticky Header
Code Snippets
<!-- Sticky Search Bar Function -->
<script>
window.onscroll = function() {stickySearch()};
var header = document.getElementById("search-container");
var sticky = header.offsetTop;
function stickySearch() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
