javascript - 检测函数内的垂直滚动和窗口宽度

Question

我有一个 div，我希望在窗口宽度大于或等于 1350px 时显示它，但如果窗口小于 1350px，则 div 可以是:

1) 如果用户尚未垂直滚动 320px，则隐藏；或者2) 如果用户垂直滚动超过 320 像素，则会出现。

我似乎不知道如何让它工作。这些条件可以在这里更好地直观地描述: Condition Matrix

<!-- Show Box -->
$(document).ready(function() {
  $(window).scroll(function(){
    boxCheck();
  });
  $(window).resize(function() {
  	boxCheck();
  })
  
  function boxCheck() {
  	if($(window).width() >= 1350) {
    	$(".box").show;
  } else if($(window).width() < 1350) && $(window).scrollTop() < 320 {
        $(".box").hide;
  } else ($(window).width() < 1350) && $(window).scrollTop() >= 320 {
        $(".box").show;
  }
});

html, body {
  margin: 0;
  padding: 0;
  }

.box {
  position: fixed;
  width: 100%;
  height: 50px;
  background: red;
  display: none;
  }

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

<div class="box"></div>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel velit ex. Maecenas id velit aliquam, molestie nunc efficitur, mollis elit. Sed elit odio, porta auctor convallis gravida, volutpat ac massa. Pellentesque vel bibendum nisi. Maecenas nibh arcu, gravida a volutpat rhoncus, imperdiet congue quam. Nunc eget nibh non nibh bibendum elementum vitae nec tellus. Sed vehicula mollis lacus eget hendrerit. Pellentesque nec ultrices felis. Sed quis luctus tellus. Vivamus feugiat ante id metus aliquet, congue semper erat porttitor. Pellentesque mollis pellentesque mi, eu cursus ex vulputate eget. Etiam cursus felis lobortis magna imperdiet dignissim. Nulla egestas nulla urna, ut aliquet magna interdum eu. Quisque dignissim leo eget arcu posuere auctor. Sed commodo quis eros a aliquet.

Nunc nec odio id elit elementum elementum vel vitae felis. Suspendisse ullamcorper dictum cursus. Maecenas et lacinia erat. Integer dui orci, pharetra ut orci et, volutpat ultrices enim. Ut efficitur velit cursus, fringilla neque et, ultricies velit. Curabitur vitae volutpat neque, non porta neque. In luctus lectus quam, porttitor euismod nisi feugiat eu. Mauris suscipit nisl lacus, sit amet congue sem tempor a. Quisque eleifend tortor nibh, nec fringilla felis tincidunt vitae. Aenean vel magna ut ipsum sodales efficitur vel quis leo. Maecenas vitae mollis velit. Etiam cursus diam nec commodo eleifend. Donec sit amet consequat justo, vitae imperdiet tortor. Aenean non dolor et nulla pellentesque dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Proin vitae diam a nibh tristique sodales et et ipsum. Nam imperdiet lectus et enim auctor fringilla. Nullam laoreet malesuada elit, in eleifend sem porta a. Phasellus sagittis lacus nec lacus elementum fermentum. Sed porta consectetur pulvinar. Nam fringilla enim id nibh imperdiet pellentesque. Fusce ultricies eros ex, eu finibus tortor fermentum quis. Quisque tincidunt, erat id fringilla consequat, nisi mauris molestie tellus, sed sagittis erat purus nec nisl.

Pellentesque ullamcorper tellus eget urna imperdiet lobortis. In hac habitasse platea dictumst. Sed eget mattis mi, vitae dictum odio. Donec at quam at lectus porta pellentesque sed ut diam. Morbi felis massa, tempus et dui non, vulputate cursus ligula. Nullam maximus, sem vitae consectetur eleifend, dolor mi posuere erat, a ornare urna orci at sem. Donec lorem felis, feugiat eu imperdiet eget, consectetur in nibh. Proin aliquam faucibus odio, id tincidunt risus faucibus in. Nullam placerat eros pharetra sagittis vestibulum. Mauris sodales ligula ut dolor malesuada, nec fermentum magna finibus. Curabitur lacus turpis, rutrum ac elementum eu, dapibus ut leo. Donec vitae iaculis elit.

Etiam egestas sapien vulputate erat posuere, vitae egestas orci pharetra. Morbi lacinia, tellus at lobortis feugiat, nisi velit egestas nibh, et pretium quam lectus nec odio. Quisque ut elementum quam, ac vulputate libero. Suspendisse vestibulum pulvinar felis, ut tincidunt libero scelerisque sit amet. Donec eu ipsum a eros aliquam vehicula eget et nisi. Vivamus et luctus odio. In hac habitasse platea dictumst. Vivamus ut risus sit amet nunc porta auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean mauris purus, sagittis a euismod sed, tempus sit amet mauris. Vivamus blandit, erat a pellentesque imperdiet, nisl turpis posuere sapien, non fermentum sem dui quis ligula. In euismod ante vel nisi pulvinar, quis sagittis urna volutpat.
</div>

Answer 1

你的逻辑很好(虽然可以在计算上简化)，但是你有很多语法错误。

1. if 检查的 () 错误。
2. .hide/.show 之后缺少 ()，因此未调用它们。

最后，您的 if 可以得到简化，因为您不需要在每个步骤中重新检查之前的条件(如果您进行了下一个检查，则意味着之前的条件不匹配)。 p>

还使用一些变量来缓存值，以避免一直查询 DOM。

$(document).ready(function() {
  var jWindow = $(window);

  jWindow.scroll(function() {
    boxCheck();
  }).resize(function() {
    boxCheck();
  })

  function boxCheck() {
    var width = jWindow.width(),
      scroll = jWindow.scrollTop();

    if (width >= 1350) {
      $(".box").show();
    } else if (scroll < 320) {
      $(".box").hide();
    } else {
      $(".box").show();
    }
  }
});

html,
body {
  margin: 0;
  padding: 0;
}

.box {
  position: fixed;
  width: 100%;
  height: 50px;
  background: red;
  display: none;
}

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

<div class="box"></div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel velit ex. Maecenas id velit aliquam, molestie nunc efficitur, mollis elit. Sed elit odio, porta auctor convallis gravida, volutpat ac massa. Pellentesque vel bibendum nisi. Maecenas
  nibh arcu, gravida a volutpat rhoncus, imperdiet congue quam. Nunc eget nibh non nibh bibendum elementum vitae nec tellus. Sed vehicula mollis lacus eget hendrerit. Pellentesque nec ultrices felis. Sed quis luctus tellus. Vivamus feugiat ante id metus
  aliquet, congue semper erat porttitor. Pellentesque mollis pellentesque mi, eu cursus ex vulputate eget. Etiam cursus felis lobortis magna imperdiet dignissim. Nulla egestas nulla urna, ut aliquet magna interdum eu. Quisque dignissim leo eget arcu posuere
  auctor. Sed commodo quis eros a aliquet. Nunc nec odio id elit elementum elementum vel vitae felis. Suspendisse ullamcorper dictum cursus. Maecenas et lacinia erat. Integer dui orci, pharetra ut orci et, volutpat ultrices enim. Ut efficitur velit cursus,
  fringilla neque et, ultricies velit. Curabitur vitae volutpat neque, non porta neque. In luctus lectus quam, porttitor euismod nisi feugiat eu. Mauris suscipit nisl lacus, sit amet congue sem tempor a. Quisque eleifend tortor nibh, nec fringilla felis
  tincidunt vitae. Aenean vel magna ut ipsum sodales efficitur vel quis leo. Maecenas vitae mollis velit. Etiam cursus diam nec commodo eleifend. Donec sit amet consequat justo, vitae imperdiet tortor. Aenean non dolor et nulla pellentesque dignissim.
  Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vitae diam a nibh tristique sodales et et ipsum. Nam imperdiet lectus et enim auctor fringilla. Nullam laoreet malesuada elit, in eleifend sem porta a. Phasellus
  sagittis lacus nec lacus elementum fermentum. Sed porta consectetur pulvinar. Nam fringilla enim id nibh imperdiet pellentesque. Fusce ultricies eros ex, eu finibus tortor fermentum quis. Quisque tincidunt, erat id fringilla consequat, nisi mauris molestie
  tellus, sed sagittis erat purus nec nisl. Pellentesque ullamcorper tellus eget urna imperdiet lobortis. In hac habitasse platea dictumst. Sed eget mattis mi, vitae dictum odio. Donec at quam at lectus porta pellentesque sed ut diam. Morbi felis massa,
  tempus et dui non, vulputate cursus ligula. Nullam maximus, sem vitae consectetur eleifend, dolor mi posuere erat, a ornare urna orci at sem. Donec lorem felis, feugiat eu imperdiet eget, consectetur in nibh. Proin aliquam faucibus odio, id tincidunt
  risus faucibus in. Nullam placerat eros pharetra sagittis vestibulum. Mauris sodales ligula ut dolor malesuada, nec fermentum magna finibus. Curabitur lacus turpis, rutrum ac elementum eu, dapibus ut leo. Donec vitae iaculis elit. Etiam egestas sapien
  vulputate erat posuere, vitae egestas orci pharetra. Morbi lacinia, tellus at lobortis feugiat, nisi velit egestas nibh, et pretium quam lectus nec odio. Quisque ut elementum quam, ac vulputate libero. Suspendisse vestibulum pulvinar felis, ut tincidunt
  libero scelerisque sit amet. Donec eu ipsum a eros aliquam vehicula eget et nisi. Vivamus et luctus odio. In hac habitasse platea dictumst. Vivamus ut risus sit amet nunc porta auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
  per inceptos himenaeos. Aenean mauris purus, sagittis a euismod sed, tempus sit amet mauris. Vivamus blandit, erat a pellentesque imperdiet, nisl turpis posuere sapien, non fermentum sem dui quis ligula. In euismod ante vel nisi pulvinar, quis sagittis
  urna volutpat.
</div>