Question

我想要这个语句淡化一个按钮，如果满足两个条件，屏幕大小超过767px，滚动条超过600，当你向上滚动到顶部时淡出。

如果屏幕尺寸低于767px，我希望这个jQuery为空，不做任何事情。

现在它在767以下是空的。但是当它高于按钮时淡入但不再淡化我们现在我已经添加了if语句的第二部分。

我的语法有什么不对？

$(window).scroll(function(){
   if ($(this).scrollTop() > 600, $(window).width() >= 767) {
        $(".fixed-btn").fadeIn();
    }
    else {
        $(".fixed-btn").fadeOut();
    }
});

Answer 1

它是两个条件之间的AND运算符，所以：

$(window).scroll(function(){
   if ($(this).scrollTop() > 600 && $(window).width() >= 767) {
        $(".fixed-btn").fadeIn();
    }
    else {
        $(".fixed-btn").fadeOut();
    }
});

Answer 2

考虑使用matchMedia()获得更好的效果：

// array so You can easily define more media queries in future
var media_queries = [
    window.matchMedia('screen and (max-width: 767px)')
];

function mq_0(mq){

    if(mq.matches){
        // .scroll_600 namespace so You can detach later only this event, in case of using scroll event in other scripts
        $(window).on('scroll.scroll_600', function(){

            // execute only once when .fixed-btn is not visible yet
            if($(this).scrollTop() > 600 && ! $(".fixed-btn").is(':visible')){
               $(".fixed-btn").fadeIn();
            }

        });
    }else{
        // detach event
        $(window).off('.scroll_600');
        $(".fixed-btn").fadeOut();
    }

}

// call on page load
mq_0(media_queries[0]);
media_queries[0].addListener(function(mq){
    mq_0(mq);
});

Answer 3

按钮样式：位置：固定。

$(document).ready(function() {
  $(window).scroll(function() {
      if ($(this).scrollTop() > 50 && $(window).width() >= 200) {
              console.log($(this).scrollTop() + ' ' + $(window).width());
               $('#mbtn').fadeIn();
      }
      else {
              $('#mbtn').fadeOut();
      }
  });

});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button type="button" id="mbtn" style="display:none;position:fixed;">CLick me</button>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>
<br>
<p>My Text</p>



</body>
</html>

jQuery语法滚动淡入和媒体查询

3 个答案: