Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Vamsi Pavan Mahesh Gunturu
4,541 PointsHow do I create a nav bar with the following properties
I want to create a navigation bar which shows up only when the user scrolls up, when he scrolls down, it should not show up!
3 Answers
LaVaughn Haynes
12,397 PointsYou could use javaScript and CSS. For example you could use JS to add a "scrolled" class to a container if the page is scrolled and remove the class if it's not. Then you could style your nav with CSS for the condition that it's in or not in that container with the scrolled class. Take a look as this code your browser.
<!DOCTYPE html>
<html>
<head>
<title>Change Visibility on Scroll</title>
<style>
.container{
position: relative;
height: 2000px;
}
nav{
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px;
color: white;
background-color: red;
}
.scrolled nav{
color: red;
}
</style>
</head>
<body>
<div class="container">
<nav>MY NAVIGATION BAR</nav>
</div>
<!-- get jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(window).on('scroll', function() {
var $container = $('.container');
var scroll = $(this).scrollTop();
if(scroll >= 100){
$container.addClass('scrolled');
}else{
$container.removeClass('scrolled');
}
});
</script>
</body>
</html>
Luis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsHere you will see a plugin that can help you to do exactly this.
Luis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsHere you can see a tutorial and one link to the demonstration in the end of the page.
https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c