A sticky Top Bar makes the page jump up when scrolling past it with Zurb Foundation

Question

I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past.

Answer 1

On this page: https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

I found the code in foundation.topbar.js that adds padding to the body tag depending on whether top-bar is sticky or not:

if ($('.sticky').length > 0) {
   var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
       $window = $(window);
      var offst = $('nav.top-bar').outerHeight()+20;
     (".sticky").after("
");
     $window.scroll(function() {
       if ( $window.scrollTop() >= ( distance ) ) {
          $(".sticky").addClass("fixed");

- $('body').css('padding-top',offst); }

      else if ( $window.scrollTop() < distance ) {
         $(".sticky").removeClass("fixed");

- $('body').css('padding-top','0'); } }); }

I'm not a javascript wizard - but it seems as if instead of setting offst to the height of the .top-bar, you set it to the value of .top-bar-sticky-padding directly, you can control the offset with a media query instead of forcing an offset the size of the top-bar.

Am I wrong? I'm nervous about "hacking core" but this seems to have solved the problem for me.