检测函数

Question

我有一个div，我想在窗口宽度大于或等于1350px时出现，但是如果窗口小于1350px div：

1）如果用户尚未垂直滚动320px，则隐藏;要么 2）如果用户垂直滚动超过320px，则显示。

我似乎无法弄清楚如何让它发挥作用。这里可以更好地描述这些条件： 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，因此未调用它们。

最后，你的ifs可以简化，因为你不需要在每一步中重新检查先前的条件（如果你已经进行了下一次检查，则意味着前一个不匹配）。

还使用一些变量来缓存值，以避免一直查询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>