Menu icon Foundation
"Sticky" event top bar

Is there a way to intercept the "sticky" event in the top bar?
That is, I wish the "title-area" become visible only when the top-bar gets fixed, but I don't know how to catch this event.

topbarstickynavnavigation

Is there a way to intercept the "sticky" event in the top bar?
That is, I wish the "title-area" become visible only when the top-bar gets fixed, but I don't know how to catch this event.

Paolo Visnoviz over 5 years ago

Found it, with a little of javascript (wordpress style).

 jQuery(document).ready(function( $ ) {

// media query event handler
if (matchMedia) {
        //The same value of $small-range
  var mq = window.matchMedia("(min-width: 1025px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {

  if (mq.matches) {

                if($(document.body).hasClass('f-topbar-fixed')) {
                        $( ".site_name a" ).css( "display", "inline-block" );
                } else {
                        $( ".site_name a" ).css( "display", "none" );
                }

                $( window ).scroll(function() {
                            if($(document.body).hasClass('f-topbar-fixed')) {
                                      $( ".site_name a" ).css( "display", "inline-block" );
                            } else {
                                      $( ".site_name a" ).css( "display", "none" );
                            }
                });

  }
  else {
                $( ".site_name a" ).css( "display", "inline-block" );

                $( window ).scroll(function() {
                                      $( ".site_name a" ).css( "display", "inline-block" );
                            }
                );
  }

}

});