Ich habe die folgenden Snippets in meinem Code, die mir helfen, eine Navigation mit fester Top-Navigation auf dem Bildschirm zu erreichen.Höhe dynamisch anpassen
HTML:
<nav>
<button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<img class="navbar-brand" src="pics/logonavigation.png"/>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link smoothScroll" href="#navigation">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
javascript:
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $(window).height() - $('nav').height();
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
$('.navbar-toggler').click(function() {
var newHeight = $('nav').height();
$(".fixed").height(newHeight);
});
});
</script>
CSS:
.fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 1;
height: 50px;
}
Die gesamte Datei Pastebin HERE
gefunden werden kann ich Bootstrap v4 bin mit
Anzeigen die Website in der mobilen Ansicht folgenden zu beachten ist:
Der zusammenklappbare Abschnitt der Navigation ist links „nackt“ ohne den schwarzen Hintergrund. Was ich möchte, ist die Wirkung unten zu bekommen:
ich nicht die Klasse „navbar“ verwenden, da irgendwie stört es mit dem Fest Top-Navigation-on-Scroll. Wie kann ich den Hintergrund des kopierbaren Teils der Navigation in der mobilen Ansicht schwarz erscheinen lassen? Ich habe versucht, die Höhe von. Dynamisch mit jquery anzupassen, aber es funktioniert nicht.
Ich habe versucht, beide Codepen und Jsfiddle, aber das Menü zeigt nicht einmal, wie es auf meinem PC vor Ort. –
Höhe: auto bewirkt, dass der Hintergrund die gesamte Seite abdeckt, sobald sie den oberen Rand erreicht –
Das liegt daran, dass Ihre Dateipfade nicht mit irgendetwas verknüpft sind, wenn Sie den Code in eine Code-Sharing-Plattform einfügen, da es sich um Links zu Ihrem lokalen Link handelt Ordnerstruktur. Ich habe mehr davon herausgefunden. Wird meine Antwort bearbeiten. – Jesse