CSSでモバイルビューのjQueryコードを適応/無効にする

Question

私はスティッキーヘッダーを私のウェブサイトに持っています。私はモバイルのために私のヘッダーを最適化しようとしたが、すべてがOKだったが、それがstickyになったとき、それは彼またはそのようなものをサイズ変更するのでナビゲーションは表示されません。私が知りたいのは、CSSヘッダ内のjQueryコードを変更する方法はありますか？stickyになったときにヘッダがサイズ変更されないようにします。ここで

は、私のコードの例です：http://codepen.io/anon/pen/JKXYpa

注：あなたは問題がどこにあるか確認したい場合は、単に幅< 480PXに、ブラウザのサイズを変更します。

Answer 1

次のCSSが役立ちます。あなたは問題を引き起こしているいくつかのことをしています。最も重要なのは、あなたの＃ラッパー宣言が矛盾していることです。あなたはあなたの最大幅よりも大きい最小幅を宣言しました。最小幅は最大幅より小さくなければなりません。

私は、小さな画面サイズのメディアクエリでヘッダーフォントサイズを小さくして、ナビフィットに合わせるなど、いくつかの小さな調整を加えました。それ以外の場合は、青いコンテナの下を囲みます。

*{ 
     padding:0; 
     margin:0; 
    } 

    /* Header */ 
    #header { 
     transform: translateZ(10px); 
     background-repeat: no-repeat; 
     background-color:#3cb5f9; 
     width: 100%; 
     height: 80px; 
     top:200; 
     left: 0; 
     z-index: 999; 
     box-sizing:border-box; 
     border-bottom:1px solid white; 
    } 
    #header nav { 
     display: inline-block; 
     float:right; 
     line-height:80px; 
    } 
    #header nav a { 
     margin-left: 25px; 
     color: #fafafa; 
     font-weight: 700; 
     font-size: 18px; 
     text-decoration:none; 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     -ms-transition: all 0.5s; 
     -o-transition: all 0.5s; 
     transition: all 0.5s; 
    } 
    #header nav a:hover { 
     color: black; 
    } 
    #header img { 
     line-height:80px; 
     margin-top:14px; 
     display:block; 
     float:left; 
     height:51px; 
    } 

    .clearfix{ 
     display: block; 
     width:70%; 
     clear:both; 
     margin: 0 auto; 
    } 

    /*Mobile part*/ 
    @media screen and (max-width: 480px) { 

     #header { 
      width: 100vw; 
      float:none; 
     } 

     p{ 
      font-size: 0.5em; 
     } 

     ::-webkit-scrollbar{ 
      display:none; 
     } 

     #header nav{ 
      float:right; 
     } 
     #header nav { 
      display: inline-block; 
      float:center; 
      line-height:80px; 
     } 
     #header nav a { 
      font-size: 12px; 
      margin-left: 10px; 
     } 
     #header nav a:hover { 
      color: black; 
     } 
     #header .clearfix { 
      width: 95%; 
     } 
    } 

    /* Other */ 

    #main{ 
     width: 100%; 
     color:#3cb5f9; 
     margin: 0 auto; 
    } 

    .container{ 
     width:70%; 
     margin: 0 auto; 
    } 

    #wrapper { 
     max-width:1240px; 
     height:2000px; 
     color:#3cb5f9; 
     margin: 0 auto; 
    } 

    .home{ 
     width:100vw; 
     height:600px; 
     clear:both; 
    }