我很难让jQuery滚动显示/隐藏仅在桌面视口上运行。
尽我所能尝试，一旦屏幕移动，我就无法使隐藏功能停止工作。
我已经尝试过使用CSS媒体查询来编写该函数，以便仅在显示时起作用：无，以下面的@Andrews注释为基础。
我不能像评论中所建议的那样通过媒体查询简单地使用显示/隐藏。因为我需要桌面标头的两个变体。
$(document).ready(function () {
$(window).scroll( function() {
if( $(this).scrollTop() > 0 ) {
$(".middle-tier, .top-tier-menu-bar ").hide();}
else {$(".middle-tier, .top-tier-menu-bar").show();}
});
});
.placeholder-style{
background-color: lightblue;
border: 2px solid blue;
padding: .3em;
text-align: center;
margin: .5em;
}
.logo{
width: 100px;
}
.top-tier-menu-bar{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobile-nav-extra-widgets{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.middle-tier{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.right-icons{
display: flex;
flex-direction: row;
justify-content:space-around;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline;
padding: 2em;
}
.header{
position: sticky;
overflow: hidden;
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
background-color: aliceblue;
}
.page-contents{margin-top:250px;}
@media (min-width:500px) {
.header{position:fixed;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "header">
<!--Top tier menu starts-->
<div class="top-tier-menu-bar">
<div class="trust-pilot-widget placeholder-style">
<span>TrustPilot Widget</span>
</div>
<div class="click-to-call placeholder-style">
<span>Phone number</span>
</div>
</div>
<div class = "middle-tier">
<div class ="search-icon placeholder-style">Search</div>
<div class = "central-logo placeholder-style logo">Logo</div>
<div class ="right-icons placeholder-style">
<div class = "user placeholder-style">User</div>
<div class = "cart placeholder-style">Cart</div>
</div>
</div>
<div class="nav">
<ul class="placeholder-style">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
<div class="page-contents">
<div id="mobile-viewport-detect">test</div>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style" style="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
</div>
</body>
我现在做了一个小提琴，以充分展示上下文及其当前的工作方式。真的很感谢这里的提示。
谢谢朋友。