我有一个带有滚动功能的加载和调整大小功能，该功能应在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>