我有一个带有滚动功能的加载和调整大小功能,该功能应在992px以上的屏幕上的窗口滚动中显示一个固定的标题。

在低于992px的屏幕上,我使用静态放置的同一标题,问题是.load和.resize函数无法正常工作。

我希望功能像媒体查询一样保持一致,我不知道这是否可行,如果有人知道该怎么做,我将非常感激。

JSFiddle



$(window).on('load resize', function() {
      if($(window).width() > 992) {
        function header_fixed_scroll() {
          if ($(this).scrollTop() > 200) {
            $('.header-fixed').show();
          } else {
            $('.header-fixed').hide();
          }
        }
        $(document).ready( function () {
          header_fixed_scroll();
        $(window).on('scroll', header_fixed_scroll);
    });
   };
  });

body {
  height:1500px;
}

.header-fixed {
  position:fixed;
  top:0;
  width:100%;
  height:70px;
  background:red;
  display:none;
}

@media screen and (max-width:991px) {
  .header-fixed{
    position:static;
    display:block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="header-fixed"></div>
</body>

最佳答案

尝试以下代码修复:



function header_fixed_scroll() {
  if ($(this).scrollTop() > 200) {
    $('.header-fixed').show();
  } else {
    $('.header-fixed').hide();
  }
}
$(document).ready(function() {
  $(window).on('load resize scroll', function() {
    if ($(window).width() > 992) {
      header_fixed_scroll();
    };
  });
});

body {
  height: 1500px;
}

.header-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  background: red;
  display: none;
}

@media screen and (max-width:991px) {
  .header-fixed {
    position: static;
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="header-fixed"></div>
</body>

08-17 07:47