Lesson 9: Add a Sticky Search Bar

Matt Bradford-Aunger Updated by Matt Bradford-Aunger

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>

How did we do?

Lesson 8: Replace Top Articles with Featured Articles

Congratulations You've Finished the Course ๐ŸŽ‰

Contact