Ich verwende in einem bootstrap Layout eine bootstrap navbar auf Basis des Templates mod_navbar.
Über folgendes JS bleibt sie auch wie gewünscht beim Scrollen oben am Viewport stehen:
Code:
<script>
jQuery(document).ready(function($) {
// Fixa navbar ao ultrapassa-lo
var navbar = $('#navbarProdukte'),
distance = navbar.offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');
$("body").css("padding-top", "70px");
} else {
navbar.removeClass('navbar-fixed-top');
$("body").css("padding-top", "10px");
}
});
});
</script>
Die Klasse .navbar-fixed-top hat nun aber folgendes CSS:
HTML-Code:
position: fixed;
right: 0;
left: 0;
z-index: 1030;
was zur Folge hat, dass das Menü im Sticky-Zusand den Contao-Container verlässt und die gesamte Breite des Viewports einnimmt.
Gibts da ne elegante Lösung? Wenn ich jetzt hier erst zusätzliche divs mit diversen mediaQueries anlegen muss, brauche ich doch kein Framework wie Bootstrap, oder habe ich da was falsch verstanden?
Lesezeichen