css [粘性导航]粘性主导航与媒体查询#js #mq

Posted 2021-05-13

$(document).ready(function() {
  var mainNav = ".main-nav";
  var fixed = "is-fixed";
  var mq = window.matchMedia("(min-width: {em})");
  var top = $(mainNav).offset().top;
  var navHeight = $(mainNav).outerHeight();

  $(window).scroll(function(event) {
    var y = $(this).scrollTop();

    if (y >= top && mq.matches) {
      $(mainNav).addClass(fixed);
      $(".header").css("margin-bottom", navHeight);
    } else {
      $(mainNav).removeClass(fixed);
      $(".header").css("margin-bottom", "");
    }
  });
});

.main-nav {
  &.is-fixed {
    position: fixed;
    top: 0;
    width: 100%;
  }
}