與jquery不同的是，當寬度屏幕是1050像素時刪除類

好吧我現在知道如何刪除窗口寬度的abd add類。與jquery不同的是，當寬度屏幕是1050像素時刪除類

但現在我疲於應付這個問題：

我想這一點：

var num = 90; //number of pixels before modifying styles 

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) { 
     $('#menu2').addClass('f-nav'); 
    } else { 
     $('#menu2').removeClass('f-nav'); 
    } 
});

與此有關的工作：

function checkWidth() { 
    if ($(window).width() > 1049) { 
     $('#menu2').addClass('f-nav'); 
    } else { 
     $('#menu2').removeClass('f-nav'); 
    } 
} 

$(window).resize(checkWidth);

所以，換句話說，

當我scrolldown它必須添加一個類，但是當它調整它必須刪除類+它也必須被刪除當我向上滾動。

來源

2013-12-09 Dionoh

爲什麼不使用'@media screen和（min-width：1049px）{...}'來設置屏幕寬度的樣式？ – Reeno

導致它與我的代碼掙扎。我無法解釋爲什麼，但我真的希望這一起工作 – Dionoh

我有一個桌面菜單，必須遵循滾動下來，但我想要我的響應菜單是與桌面菜單相同的編碼也遵循底部。這就是爲什麼我要這個工作。我整個一週都在爲此而苦苦掙扎。 – Dionoh

在這種情況下，您不能在不使用JavaScript的情況下更改類。但是，您可以使用CSS Media查詢來更改不同設備上給定類的行爲。

舉例如下：

(CSS) 
.f-nav { 
    color: #fff; 
} 

@media screen AND (max-width: 1050px) { 
    .f-nav { 
     color: #000; 
    } 
}

來源

2013-12-09 14:20:36 Lashus

嗯，我想要這個：當我在頂部並且屏幕大於1050px時f-nav不會被添加，但是當我向下滾動，屏幕大於1050像素，它必須添加蜜蜂。並且當屏幕向下滾動時，使得比1050px更小的圖像必須被移除。但wjhen屏幕在頂部，使得比1050px小，沒有東西會被刪除，因爲沒有添加任何東西。 – Dionoh

根據您的評論@ Lashus的回答

|  | > 1050px | < 1050px | 
+----------------------------+ 
| top | -  | -  | 
| down | + f-nav | - f-nav |

這意味着，什麼也不做在上面，但增加或者向下滾動

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) 
     checkWidth(); 
});

刪除 f-nav，

JSFiddle

另請注意.bind()與.on()

註釋在jQuery 1.7中，。對（）方法是用於事件處理程序安裝到一個文件的優選方法。

來源

2013-12-09 15:07:20

JS小提琴不工作 – Dionoh

是的，這就是我想要的 – Dionoh

| | > 1050px | <1050px | + ---------------------------- + |頂部| - | - | | down | + f-nav | - f-nav | – Dionoh

與jquery不同的是，當寬度屏幕是1050像素時刪除類

回答

相關問題