レスポンシブモバイルにクラスを追加する

Question

私の質問は、レスポンシブモバイルにクラスを追加する方法です。私が必要とするのは、スクロールイベントにこのクラスを 'スクロール'し、ウィンドウの幅が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>

Answer 1

このような目的のためのメディアクエリを使用します。これは、resizeイベントを置き換えることができます。

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

Answer 2

モバイルクエリにメディアクエリまたはブートストラップを使用できます。 Bootstrap mobile responsive...

Answer 3

明確にしたいことがわかりません。これはどう？

$(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>

Answer 4

pxを削除してください：

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

Answer 5

$（ウィンドウ）.width（）は数値を返しますが、それはなぜだ文字列であるので、あなたは '720px' を追加することによって比較します働いていない。 'px'と ''も削除してください。なぜなら、あなたが何かを置くとき、それは文字列になるからです。

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

Answer 6

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> 

Answer 7

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>

は、私はあなたの答えはここにあると思います。だから、次の方法を試してみてください？