jQuery語法滾動淡入淡出和媒體查詢

我想要這個語句在IF滿足兩個條件時淡出按鈕，屏幕大小超過767px並且滾動條超過600並且當您向後滾動到頂部時淡出。jQuery語法滾動淡入淡出和媒體查詢

如果屏幕大小低於767px我希望這個jQuery是空的，不做任何事情。

現在它在767以下是空的。但是當它在按鈕之上淡出但不再消失我們現在我已經添加了if語句的第二部分。

我的語法有什麼不正確？

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

來源

2017-03-09 Sam Ducker

這是2個條件如此一個AND操作：

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

來源

2017-03-09 22:27:24 JustARandomProgrammer

讓我知道它在這裏工作 – JustARandomProgrammer

這工作完美，感謝幫助我這樣的基本問題仍然在學習語法。 –

&&不僅僅用於js ..其他運算符有：|| --->或！= ---->不同 – JustARandomProgrammer

考慮使用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); 
});

來源

2017-03-09 23:00:38 instead

謝謝，我將讀入此內容並查看matchMedia（）。爲什麼它會提高性能？是因爲你將屏幕大小設置爲可重用的變量？ –

使用'matchMedia（）'的主要優點是if語句的單個調用。如果媒體查詢匹配，則執行if語句。否則，else語句。在我的例子中，當用戶訪問網站的屏幕尺寸> 767時，滾動事件永遠不會被觸發，並且'fadeOut（）'只被調用一次。不是每次他改變屏幕大小或滾動。如果他將屏幕尺寸縮小到767px，那麼滾動事件將僅附加到身體一次，並且當然會在頁面滾動上觸發。 – instead

按鈕風格：位置：固定的。

$(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>

來源

2017-03-09 23:30:11

jQuery語法滾動淡入淡出和媒體查詢

回答

相關問題