Question

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

在992px以下的屏幕上，我使用静态定位的相同标题，问题是.load和.resize函数无法正常工作。

我希望功能与媒体查询一致，我不知道这是否可行，如果有人知道该怎么做，我会很感激。

＆＃13;

$(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);
    });
   };
  });

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

尝试此代码修复：

＆＃13;

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();
    };
  });
});

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

jQuery .load和.resize无法正常工作

1 个答案: