Question

我已经为我的徽标使用了添加和删除类功能，

我希望在窗口宽度＆lt; 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');
    }
});

Answer 1

使用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');
    }
});

Answer 2

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

$(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');
    }
  }
});

Answer 3

你可以提出一个条件

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');
        }
    });
}

Answer 4

为什么Javascript在css中可行。我假设您正在寻找固定标头。我们只能通过使用媒体查询在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
  }
});

如何在Windows宽度上禁用此jquery函数＆lt; 500px的

4 个答案: