當瀏覽器調整大小時隱藏粘滯導航

我爲我的項目創建了粘滯導航，當我調整瀏覽器大小時，此粘滯導航必須僅在桌面上顯示mininum 980px並隱藏在980px以下。當瀏覽器調整大小時隱藏粘滯導航

這裏是我的代碼

if ($(window).width() > 980) {  
$('.stickynav a').on('click', function(e) { 
e.preventDefault(); 
}); 
$(window).on('scroll',function() { 
    var scrolltop = $(this).scrollTop(); 

    if(scrolltop >= 132) { 
     $('.stickynav').fadeIn(250); 
    } 

    else if(scrolltop <= 210) { 
     $('.stickynav').fadeOut(250); 
    } 
}); 
}

我jsfiddle 創建我怎樣才能解決這個問題？

來源

2013-12-12 sinzo

你可以在CSS中用媒體查詢來做到這一點。

@media only screen and (max-width: 979px) { 
    .stickynav{ 
    display: none; 
    } 
}

我已經更新了你的提琴：http://jsfiddle.net/cXH5g/2/

媒體查詢允許您定義的CSS爲特定設備/屏幕尺寸。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

來源

2013-12-12 18:28:03 brian

喜布賴恩，感謝您的回答，但不起作用。當用戶第一次打開頁面時，粘性菜單應該隱藏，並且只有當用戶滾動頁面時才顯示。這是你的代碼全屏http://jsfiddle.net/cXH5g/2/embedded/result/ – sinzo

這樣做的最好方法是使用CSS3媒體查詢。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但如果你想用jQuery做到這一點：

$(function(){ 

if ($(window).width() > 980) { 
    alert($(window).width()); 
    $('.stickynav').on('click', function(e) { 
     e.preventDefault(); 
    }); 

    $(window).scroll(function() { 
     var scrolltop = $(this).scrollTop(); 

     if(scrolltop >= 132) { 
      $('.stickynav').fadeIn(250); 
     } 

     else if(scrolltop <= 210) { 
      $('.stickynav').fadeOut(250); 
     } 
    }); 
} 
});

我把一個alert看的時候，你的代碼應該工作。檢查this fiddle

來源

2013-12-12 18:36:30

嗨，這是我的初始代碼。該代碼的問題在於，當您調整小於980像素的屏幕大小時，必須刷新頁面，菜單將隱藏。你可以在全屏模式下檢查你的代碼 - http://jsfiddle.net/cXH5g/3/embedded/result/嘗試滾動頁面，然後調整瀏覽器的大小不超過980像素。謝謝 – sinzo

當瀏覽器調整大小時隱藏粘滯導航

回答

相關問題