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

小提琴https://jsfiddle.net/calder12/rhje57a4/ 限制：https://www.sitepoint.com/throttle-scroll-events/

Answer 2

您应首先修复您的病情并使其成为一种功能。然后创建两个事件监听器来调用函数，一个监听器用于窗口调整大小，一个调用用于滚动页面

在if语句中滚动超过特定点AND屏幕的宽度

2 个答案: