Horizontales Menü fixieren

Hallo,

ich habe ein horizontales Menü im Seitenkopf, das ich so fixieren möchte, dass es beim Scrollen der Seite nicht mitscrollt. Wie läßt sich das am Besten bewerkstelligen? Ich habe schon mit affix herumprobiert, aber die Einbindung von bootstrap.css verändert mir immer diverse Schriften im fixed Block und dem Rest der Page, obwohl mein CSS File erst danach eingebunden wird.

LG

Ich habe die Seite jetzt hinbekommen, indem ich die bootstrap.css nicht mehr eingebunden habe, sondern nur mehr die CSS Anweisung

.affix {position: fixed} verwende.

Wenn der Seiteninhalt jetzt unter dem Menü durchscrollt, ist das Menü allerdings nicht mehr vernünftig lesbar, da es transparent ist. Kann man auf den Scrollvorgang reagieren und den Hintergrund des fixierten Menüs dann abdunkeln oder den Menübereich ev. auch verkleinern?

Den durchscheinenden Hintergrund habe ich mit style="background: rgba(21,18,21,0.7);" gelöst.

Bleibt noch der Effekt, dass die Hintergrundfarbe sich langsam verändert, wenn man zu scrollen anfängt. Wie kann man das erreichen?

Auf der Suche nach einem Scroll Back Button habe ich ein JS Script gefunden, welches beim Scrollen einen Back Button anzeigt. Mit einer kleinen Adaptierung habe ich das Script so umgebaut, dass es die Transparenz beim Scrollen sanft ändert:

<div class="container" style="background:rgba(21,18,21,0.7); transition: background 1s">

<script>
window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            var overlay = document.querySelector (".container");
            if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
                    overlay.style.background = "rgba(64,0,0,0.7)";
                } else {
                    overlay.style.background = "rgba(21,18,21,0.7)";
                }
            }
</script>

Damit tut es, was ich wollte!

LG