如何禁用窗口宽度<500像素

这个jQuery功能我已经使用的添加和移除类功能我的标志，如何禁用窗口宽度<500像素

我想在窗口宽度< 500px的禁用该功能，

这里是脚本我用过。

$(document).on('scroll', function() { 
    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
       $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
});

来源

2016-11-07 ubakara samy

只需检查处理程序中的窗口宽度。

$(document).on('scroll', function() { 
    if($(window).width() >= 500){ 
    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
     $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
    } 
});

来源

2016-11-07 05:50:27

使用window.innerWidth来计算窗口的宽度，不包括工具栏和滚动条。

$(document).on('scroll', function() { 

    if (window.innerWidth < 500) return; // Use this 

    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
       $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
});

来源

2016-11-07 05:50:37 void

'window.innerWidth'不排除垂直滚动条（如果存在），但是不包含“document.documentElement.clientWidth”。 – Flyer53

你可以把一个条件

if($(window).width() > 500) { 
    $(document).on('scroll', function() { 
     if ($(this).scrollTop() > 50) { 
      $('header').addClass('sticky'); 
      $('#logo').addClass('none'); 
      $('#logo-black').removeClass('none'); 
     } else { 
      $('header').removeClass('sticky'); 
      $('#logo').removeClass('none'); 
      $('#logo-black').addClass('none'); 
     } 
    }); 
}

来源

2016-11-07 05:51:22

为什么要使用JavaScript时，这是可能的CSS。我假设你正在寻找固定标题。我们只能通过使用媒体查询来处理这个问题。看看这个。

.header{ 
 
    position:fixed; 
 
    left:0; 
 
    right:0; 
 
    height:50px; 
 
    background:red; 
 
} 
 
body{ 
 
    height:1000px; 
 
    width:100%; 
 
    margin:0 
 
} 
 
@media only screen and (max-width: 500px) { 
 
    .header{ 
 
    position:relative; 
 
    } 
 
}

<div class="header"> 
 
    sticky header 
 
</div>

如果你是对的javascript真正感兴趣的然后就检查在这样的调整窗口的大小宽度。

$(window).resize(function(){ 
    if($(window).width() > 500){ 
     //code goes here 
    } 
});

来源

2016-11-07 05:57:55

如何禁用窗口宽度<500像素

回答

相关问题