Création d'un en-tête d'opacité

Question

Je souhaite avoir un en-tête d'opacité comme celui-ci, donc lorsque je défilerai vers le bas, un en-tête fixe avec un arrière-plan noir apparaîtra. Je l'avais fait pour wordpress mais maintenant je veux le faire pour bootstrap mais ça ne marche pas.

J'ai aussi essayé this one, parce que celui-ci fonctionnait pour le site Web de wordpress mais quand je l'essaye moi-même maintenant cela ne fonctionnera pas.

Je charge le script simplement en l'utilisant, parce que c'est juste dans la carte js qui est au même endroit que mon about.html.

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

Le code 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> 

Le 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; 
    } 

La JS

$(document).ready(function() { 

    $(window).scroll(function() { 

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

Example of not working

Je voudrais simplement ajouter la classe avec l'opacité avec le fondu de 1 seconde. Ou peut-être une solution différente sur la façon de le réparer. Merci d'avoir lu ma question.

Answer 1

Cela fonctionne bien, il vous suffit de déplacer votre JS vers le bas du corps, et assurez-vous de charger jQuery en premier. Vous pouvez également ajouter votre transition à #header au lieu de #header.scrolled: de cette façon, il disparaît facilement lorsque vous faites défiler vers le haut. Voir la démo:

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

Je vois que vous avez une erreur dans la console du navigateur et que l'erreur est parce que vous placez votre premier fichier .js avant que le fichier jquery. Placez toujours le fichier jquery avant tout fichier .js ou code js contenant des fonctions jquery.