Menu icon Foundation

Developer

My Posts


  • 2
    Replies
  • Header changes on scroll?

    By Max

    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.

    Last Reply by Max over 5 years ago


My Comments

Max commented on Max's post over 5 years

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 commented on Max's post over 5 years

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>

Posts Followed

  • 2
    Replies
  • Header changes on scroll?

    By Max

    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.

    Last Reply by Max over 5 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on Max's post over 5 years

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.

You commented on Max's post over 5 years

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>

Posts Followed


Following

  • No Content

Followers

  • No Content