寬度<x px時禁用jquery腳本。響應式菜單

我的代碼在桌面模式下工作正常，但是我想在屏幕尺寸小於900像素時將其禁用。寬度<x px時禁用jquery腳本。響應式菜單

這個想法是有一個固定的菜單頂部沒有移動版本的標題標誌。在移動時（< 900px），它和桌面一樣。這是我想要避免的。

希望你能指點我正確的方向！

代碼：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 180) { 
     $(".meny").addClass("fastMeny"); 
    } else if ($(window).scrollTop() < 180) { 
     $(".meny").removeClass("fastMeny"); 
    } 
});

來源

2013-11-20 Lars Harald

你可以創建小提琴嗎？ –

如果僅用於設計目的，您應該使用CSS3媒體查詢 –

這裏是一個小提琴。如果太雜亂和不清楚，我的第一個非常抱歉。試着發表一點評論。 http://jsfiddle.net/larshjk/sxrmH/ @MilindAnantwar –

可能是最合理的解決方案是建立另一個菜單，只爲手機，而不是用JavaScript做黑客。菜單會有一個不同於你有的（meny）。

然後，只需使用CSS媒體查詢來表示哪個菜單顯示，哪個隱藏。而且由於你的手機菜單有不同的類名，所以它不會受到你的添加/刪除類部分的影響。

如果你還是想用JS做到這一點，你可以修改你的腳本一點，使其不小的屏幕工作：

$(window).scroll(function() { 
    if (window.screen.width < 900) 
     return; 
    if ($(window).scrollTop() > 180) 
     $(".meny").addClass("fastMeny"); 
    else 
     $(".meny").removeClass("fastMeny"); 

});

來源

2013-11-20 14:44:02 Shomz

我想這可能是個好主意！謝謝，需要一些時間，但也許這是最好的解決方案。 @Shomz –

我不想特意給你任何代碼 - 這是一件了不起的事情要知道，你會更好地學習它，而不是從這裏複製代碼。我希望這是有道理的。 – Shomz

沒問題！我仍然在學習，有很多方法可以做事。這個想法是最有幫助再次感謝！ –

定義「.fastMeny」類只爲你所需分辨率的範圍。

@media only screen and (min-width : 900px) { 
    .fastMeny{ 
     ... 
    } 
}

這樣，你避免不必要的jQuery .resize（）監聽器，同時保持.scroll（）監聽器簡單。

附加蒂普（「MENY」）

店$一個變量，所以你沒有選擇它，而再滾動全部結束。

var meny = $(".meny"); 

$(window).scroll(function() { 
    if ($(window).scrollTop() > 180) { 
     meny.addClass("fastMeny"); 
    } else if ($(window).scrollTop() < 180) { 
     meny.removeClass("fastMeny"); 
    } 
});

來源

2013-11-20 14:53:50 lookaze

寬度<x px時禁用jquery腳本。響應式菜單

回答

相關問題