javascript - 在 if 语句中滚动超过特定点和屏幕宽度

Question

我想用 jQuery 创建一个函数，如果用户滚动超过某个点并且屏幕宽度小于一定数量的像素，则该函数显示 div。

如果这两个条件都不满足，我希望隐藏 div。这是我到目前为止所拥有的，但我不确定如何使其发挥作用。

var y = $(this).scrollTop();
    
if ( (!$(y > 400)) && (!$($(window).width() < 400))  ){
        $('.subheader').slideDown();
    } else {
        $('.subheader').hide();
    }
});

.subheader {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
}

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

Answer 1

好吧，公平警告，这在性能方面非常糟糕，所以我建议考虑限制该功能，但它应该适合您的目的。基本上，它的作用是在每次滚动或窗口调整大小时检查您的要求并执行其应该执行的操作。

$(document).ready(function() {
  $(window).scroll(function(){
    subHeaderCheck();
  });
  $(window).resize(function() {
    subHeaderCheck();
  })

  function subHeaderCheck() {
    if($(window).scrollTop() > 20 && $(window).width() < 600) {
        $(".subheader").slideDown();
    } else {
        $(".subheader").slideUp();
    }
  }
})

fiddle https://jsfiddle.net/calder12/rhje57a4/ 节流:https://www.sitepoint.com/throttle-scroll-events/