Erstellen von Deckkraft Kopfzeile

Question

Ich möchte eine Deckkraft-Header genau so, so wenn ich nach unten scrollen, wird eine feste Kopfzeile mit einem schwarzen Hintergrund erscheinen. Ich hatte für Wordpress gemacht, aber jetzt möchte ich es für Bootstrap machen, aber es funktioniert nicht.

Ich habe versucht this one als auch, weil dieser für die Wordpress-Website zu arbeiten, aber wenn ich es selbst jetzt versuchen wird es nicht funktionieren.

Ich lade das Skript nur mit diesem, weil es nur in der Js-Map ist, die an der gleichen Stelle wie meine about.html ist.

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

Die 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> 

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

Die JS

$(document).ready(function() { 

    $(window).scroll(function() { 

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

Example of not working

Ich möchte nur die Klasse mit der Opazität mit der 1 Sekunde Fade hinzugefügt haben. Oder vielleicht eine andere Lösung, wie es zu beheben ist. Danke, dass du meine Frage gelesen hast.

Answer 1

Es läuft gut, Sie müssen nur Ihre JS an den unteren Rand des Körpers bewegen, und stellen Sie sicher, dass Sie zuerst jQuery laden. Sie können auch Ihren Übergang zu #header statt #header.scrolled hinzufügen: auf diese Weise blendet es sich beim Zurückblättern nach oben. Sehen Sie sich die Demo:

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

Ich sehe, dass Sie einen Fehler in der Browser-Konsole haben und dass Fehler ist, weil Sie werden zuerst Ihre js-Datei, bevor die Datei, die jquery platzieren. Platzieren Sie die jquery-Datei immer vor einer .js-Datei oder einem js-Code, der jquery-Funktionen enthält.