Menu icon Foundation
Header changes on scroll?

I want text, that was hidden, to appear in a sticky top bar when it sticks on the top screen.

There's no mention of this feature in the docs so I want to ask this question.

I want text, that was hidden, to appear in a sticky top bar when it sticks on the top screen.

There's no mention of this feature in the docs so I want to ask this question.

Max almost 6 years ago

You can also use this easily

$(window).on("scroll", function () {
          if ($(this).scrollTop() > 75) { //Any number you want
              $("#header-content").fadeIn().removeClass("show");
          }
          else {
              $("#header-content").fadeOut().addClass("show");
          }
})

I find using waypoint more useful because when I'm using the above code and if you have a low screen resolution or if you are zoomed in It reveals the hidden text when the top screen doesn't stick to the top bar.

Max almost 6 years ago

Found the answer by using jQuery Waypoint.

http://imakewebthings.com/jquery-waypoints/

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/waypoints.js"></script>

<script>
$(document).foundation();
$(this).scrollTop(0);

$('#header').waypoint(function(direction) {
        if(direction == 'down'){
            $("#header-content").fadeIn().addClass("show");
        }
        else if(direction == 'up')
            $("#header-content").fadeOut().removeClass("show");
});
</script>