Question

可能非常简单，但我是JavaScript的新手。我想要做的只是当窗口宽度大于768时才让脚本运行。如果低于768，我不希望代码工作。此外，我希望它在调整窗口时重新加载，以便浏览器更改宽度，因为我希望页面能够按照该宽度设计的方式工作。

$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); 
} else {
    $(".navbar-brand img").attr('src', 'img/icons/logodark.png');      
}});

由于

Answer 1

您可以使用$(window).width()获取窗口宽度。然后你做一个简单的条件：

if ($(window).width() > 768) {
    $(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); 
    } else {
        $(".navbar-brand img").attr('src', 'img/icons/logodark.png');      
    }});
}

了解详情：https://api.jquery.com/width/

Answer 2

使用屏幕宽度http://www.w3schools.com/jsref/prop_screen_width.asp 在该功能上使用if并检查屏幕的宽度。实施例

   $(window).scroll(function() {
    if(screen.width<=768){
      if ($(".navbar").offset().top > 50) {
        $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); 
      } else {
        $(".navbar-brand img").attr('src', 'img/icons/logodark.png');
      }      
    }});

仅以指定的宽度运行脚本，如何？

2 个答案: