将类添加到响应式移动设备

问题描述 投票:1回答:7

我的问题是如何将类添加到响应式移动设备。我需要的是将此类'scrolled'添加到滚动事件,并在窗口宽度小于720px时添加到window.resize。例如:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 10) {
            $('nav').addClass('scrolled');
        }
        else {
            $('nav').removeClass('scrolled');
        }
    });
    var width = $(window).width();
    $(window).resize(function () {
        if (width <= '720px') {
            $('nav').addClass('scrolled');
        }
    });
})
body{
    height:2000px;
}
nav{
    width:100%;
    height:80px;
    background-color:#10de60;
    transition:all .4s ease-in-out;
}
nav.scrolled{
    height:60px;
    background-color:#ffd800;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    my Nav
</nav>
javascript jquery html css
7个回答
3
投票

尝试删除px

var width = $(window).width();
$(window).resize(function () {
    if (width <= 720) {
        $('nav').addClass('scrolled');
    }
});

1
投票

为此目的使用媒体查询。这可以替换resize事件。

@media screen and (max-width: 720px) {
   .scrolled{
    //add style here
  }    
}

1
投票

我不清楚你想要什么。也许是这样的?

$(document).ready(function () {    
    var width = $(window).width();
    $(window).resize(function () {
        if (width <= '720px') {
            $('nav').addClass('scrolled');
        }
      else
        {
          window.onscroll = function() {
            $('nav').addClass('scrolled');
          }         
        }
    });
})
body{
    height:2000px;
}
nav{
    width:100%;
    height:80px;
    background-color:#10de60;
    transition:all .4s ease-in-out;
}
nav.scrolled{
    height:60px;
    background-color:#ffd800;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    my Nav
</nav>

0
投票

您可以使用媒体查询或引导程序进行移动响应。 Bootstrap mobile responsive...


0
投票

$(window).width()返回数值,但你通过添加'720px'来比较,所以它是字符串,这就是为什么不工作。删除'px'和''。因为当你在''之间放置任何东西时,它就变成了一个字符串。所以尝试以下方式:

var width = $(window).width();
$(window).resize(function () {
    if (width <= 720) {
        $('nav').addClass('scrolled');
    }
});

0
投票
You can use bootstrap 
as <div class="row">
<div class="col-md-2">
<!-- your printing statements here -->
</div>
<div class="col-md-2">
<!-- your printing statements here -->
</div>
<div class="col-md-8">
<!-- your printing statements here -->
</div>
</div>

0
投票

body{
    height:2000px;
}
nav{
    width:100%;
    height:100px;
    background-color:#10de60;
    transition:all .4s ease-in-out;
  
}
@media (max-width:720px){
nav{
overflow-y:scroll; 
  position:relative;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    my Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Navmy Nav
</nav>

我希望你的回答在这里?


0
投票

正确的jQuery代码应如下所示:

$(window).resize(function () {
    var widthWindow = $(window).width();
    if (widthWindow <= '767') {
        $('.yourElement').addClass('mobile');
    }
    else
    {
        $('.yourElement').removeClass('mobile');
    }
});
$(window).trigger('resize');
© www.soinside.com 2019 - 2024. All rights reserved.