不透明ヘッダを作成する

Question

不透明ヘッダをこのようにしたいので、下にスクロールすると黒い背景の固定ヘッダが現れます。私はワードプレスのために作ったが、今はブートストラップのためにそれを作ってみたいが、うまくいかない。

私はthis oneも試しました。これはWordPressのウェブサイトで動作していましたが、今は自分で試してみると動作しません。

スクリプトは、about.htmlと同じ場所にあるjsマップにあるため、これを使用するだけで読み込みます。

<script src="js/header.js"></script> 

HTML

<header id="header"> 
    <div id="logo"><img src="./images/logo.png" /></div> 
    <nav class="menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li class="selected"><a href="#">About</a></li> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul>  
    </nav> 

</header> 

CSS

#header { 
    height: 80px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    /*background-color: rgb(0, 0, 0);*/ 
} 

    #header.scrolled { 
     opacity: 1; 
     background: #000; 
     color: #fff; 
     transition: all 1s ease; 
    } 

JS

$(document).ready(function() { 

    $(window).scroll(function() { 

    if ($(window).scrollTop() > 10) { 
     $('header').addClass('scrolled'); 
    } else { 
     $('header').removeClass('scrolled'); 
    }; 
    }); 
}); 

Example of not working

クラスを1秒フェードで不透明度で追加したいと思っています。または、それを修正する方法に関する別の解決策かもしれません。私の質問を読んでくれてありがとう。

Answer 1

これはうまくいきます。あなたのJSを本体の底に移動してjQueryを最初にロードする必要があります。 #header.scrolledではなく、#headerにトランジションを追加することもできます。この方法で、スクロールしてスクロールするとうまくいきます。デモを参照してください：

$(document).ready(function() { 
 

 
    $(window).scroll(function() { 
 

 
    if ($(window).scrollTop() > 10) { 
 
     $('header').addClass('scrolled'); 
 
    } else { 
 
     $('header').removeClass('scrolled'); 
 
    }; 
 
    }); 
 
});

#header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    transition: all 1s ease; 
 
} 
 
#header.scrolled { 
 
    opacity: 1; 
 
    background: #000; 
 
    color: #fff; 
 
} 
 
.menu ul { 
 
    list-style: none; 
 
} 
 
.menu li { 
 
    float: left; 
 
    margin: 1em; 
 
} 
 
body { 
 
    background: grey; 
 
    min-height: 1000px; 
 
    margin: 0; 
 
}

<header id="header"> 
 
    <div id="logo"> 
 
    <img src="http://larsdejonge.nl/bootstrap/images/logo.png" /> 
 
    </div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li class="selected"><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Work</a> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</header> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

私はあなたがブラウザのコンソールにエラーがあり、最初のjqueryのことをファイルする前に、あなたの.jsファイルを置いているので、そのエラーがあることがわかります。 jqueryファイルは、jquery関数を含む.jsファイルまたはjsコードの前に置いてください。