$(window).on('scroll'，function () {})；

Question

我正在尝试使用CSS和jQuery显示我的标题HTML的一部分；

<aside id="appNav" class="fixed-top">
<div id="appNavTop" class="appHide">
<div class="container">
<div class="row">
<div class="col-12">
<span>appNavTop</span>
</div>
</div>
</div>
</div>
[...]
</aside>

.appHide {
height: 0 !important;
overflow: hidden
}
#appNavTop {
-webkit-transition-property: height;
transition-property: height;
height: 40px
}

$(window).on('scroll', function () {
if ($(document).scrollTop() > 0) {
$('#appNavTop').removeAttr('class');
} else {
$('#appNavTop').addClass('appHide');
}
});

它在我的iPhone/iPad (使用不同的浏览器)上工作得很好，但在我的笔记本电脑(Windows)上，当我刷新页面时，我想要显示的部分再次消失，当移动滚动条时，所有内容都会返回；

在这里需要帮助；提前感谢；

Answer 1

可以将css方法与jquery一起使用，而不是使用addClass和remove attribute

​

$(window).scroll(function(){console.log($(window).scrollTop());
    if($(window).scrollTop() > 800 && $(window).scrollTop() < 850)
    {
        $('#appNavTop').css('display','none');
    }
 });

​

​

$(window).scroll(function(){console.log($(window).scrollTop());
    if($(window).scrollTop() > 800 && $(window).scrollTop() < 850)
    {
        $('#appNavTop').css('display','none');
    }
 });

<aside id="appNav" class="fixed-top">
<div id="appNavTop" class="appHide">
<div class="container">
<div class="row">
<div class="col-12">
<span>appNavTop</span>
</div>
</div>
</div>
</div>
[...]
</aside>

​