Animierte fixierte Menüleiste
Beispiele auf Codepen:
Javascript
https://codepen.io/Oliver7777/pen/LYqbQYO
jQuery
https://codepen.io/Oliver7777/pen/ExrNQvw
Kopfbereich HTML
<header>
<section id="top-bar">
<div id="c-info">Kontakt@mg-otterson.de</div>
<h1>animierte Kopfzeile</h1>
</section>
</header>
<nav>
<div id="burger-menu">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
<ul><li><a>Seite 1</a> ....
Klassen, die inkludiert sein müssen:
.fixed {
position:fixed;
top:0px;
left:0;
width: 100%;
}
.smoothed-in {
transition: top 1s;
}
Javascript:
Const breakingpointfixed = 630,// ----- Mobil-Breite
body = document. Queryselector("body"),
topbar = document. Queryselector("#top-bar"), // ----- Header-Selektor
navigation = document. Queryselector("nav"), // ----- Navigations-Selektor
mobilenavigationheight = "70px", // ----- Mobil-Höhe
menuitems = document. Queryselectorall("nav > ul > li > a"),//----- Menü-Selektor Kindelemente
scrollpaddingtop = "10px",// ----- Wenn die Kopfzeie einklappt das Padding
scrollpaddingbottom = "10px",
mobileFixed = true; // ----- Fixiertes Menü Mobil ja/nein (true/false)
var topBarHeight,
navHeight,
offset,
offsetFactor,
startFix = false,
isMobileNav = false;
const breakingPointFixed = 630,
body = document.querySelector("body"),
topBar = document.querySelector("#top-bar"),
navigation = document.querySelector("nav"),
mobileNavigationHeight = "70px",
menuItems = document.querySelectorAll("nav > ul > li > a"),
scrollPaddingTop = "10px",
scrollPaddingBottom = "10px",
mobileFixed = true;
document.fonts.ready.then(function () {
setAll();
});
function setFactor() {
let navHeightSingle = menuItems[0].offsetHeight;
if (navigation.offsetHeight > navHeightSingle) {
let div = Math.floor(navigation.offsetHeight / navHeightSingle);
offsetFactor = div;
} else {
offsetFactor = 1;
}
}
function setAll() {
navHeight = navigation.offsetHeight;
topBarHeight = topBar.offsetHeight;
setFactor();
let defaultPaddingTop = getComputedStyle(menuItems[0]).paddingTop;
let defaultPaddingBottom = getComputedStyle(menuItems[0]).paddingBottom;
offset = parseInt(defaultPaddingTop) + parseInt(defaultPaddingBottom) - parseInt(scrollPaddingTop) - parseInt(scrollPaddingBottom);
navigation.style.cssText = "top:" + (navHeight * -1) + "px;margin-top:" + navHeight + "px;";
function setFixed() {
navigation.classList.add("fixed");
navigation.classList.add("smoothed-in");
navigation.style.cssText = "top:" + (navHeight) + "px;margin-top:" + (navHeight * -1) + "px;";
body.style.paddingTop = navHeight + "px";
}
function removeScrollPadding() {
for (let menuItem of menuItems) {
menuItem.style.padding = "";
}
}
window.addEventListener("scroll", function (event) {
var scrollPos = window.scrollY;
if (!isMobileNav) {
if (!startFix) {
startFix = true;
return false;
}
if (scrollPos > topBarHeight + 1 * navHeight) {
navigation.style.marginBottom = "0px";
for (let menuItem of menuItems) {
menuItem.style.cssText = "padding-top:" + scrollPaddingTop + ";padding-bottom:" + scrollPaddingBottom + ";";
}
setFixed();
} else if (scrollPos <= topBarHeight + offset * offsetFactor) {
navigation.style.cssText = "top:0px;margin-top:0px;";
navigation.classList.remove("fixed");
navigation.classList.remove("smoothed-in");
body.style.paddingTop = "0px";
removeScrollPadding();
if (isMobileNav) {
navigation.style.marginTop = "0px";
navHeight = navigation.offsetHeight;
topBarHeight = topBar.offsetHeight;
removeScrollPadding();
}
}
} else {
if (scrollPos > topBarHeight && mobileFixed) {
navigation.classList.add("fixed");
body.style.paddingTop = navHeight + "px";
} else if (scrollPos <= topBarHeight) {
body.style.paddingTop = "0px";
navigation.classList.remove("fixed");
}
}
});
navigation.style.marginBottom = (-1 * navHeight) + "px";
if (window.innerWidth < breakingPointFixed) {
setMobileNav();
} else {
isMobileNav = false;
}
}
function setMobileNav() {
isMobileNav = true;
navigation.classList.remove("fixed");
navigation.style.cssText = "top:0px;margin-top:0;height:" + mobileNavigationHeight + ";padding-top:" + mobileNavigationHeight + ";";
navigation.classList.remove("smoothed-in");
navHeight = navigation.offsetHeight;
navigation.style.height = mobileNavigationHeight + "px";
}
window.addEventListener("resize", () => {
setFactor();
navHeight = navigation.offsetHeight;
topBarHeight = topBar.offsetHeight;
if (window.innerWidth < breakingPointFixed) {
setMobileNav();
body.style.paddingTop = "";
navigation.style.marginBottom = "";
} else {
navigation.style.paddingTop = "";
navigation.style.height = "";
isMobileNav = false;
}
});
jQuery:
Const breakingpoint = 630,// ----- Mobil-Breite
navigation = $("nav"),// ----- Navigations-Selektor
topbar = $("#top-bar"),// ----- Header-Selektor
mobilenavigationheight = "70px",// ----- Mobil-Höhe
menuitems = $("nav > ul > li > a"),//----- Menü-Selektor Kindelemente
scrollpaddingtop = "10px",// ----- Wenn die Kopfzeie einklappt das Padding
scrollpaddingbottom = "10px",
mobileFixed = true; // ----- Fixiertes Menü Mobil ja/nein (true/false)
$(document).ready(function () {
var topBarHeight,
navHeight,
offset,
offsetFactor,
startFix = false,
isMobileNav = false;
const breakingPoint = 630,
navigation = $("nav"),
topBar = $("#top-bar"),
mobileNavigationHeight = "70px",
menuItems = $("nav > ul > li > a"),
scrollPaddingTop = "10px",
scrollPaddingBottom = "10px",
mobileFixed = true;
document.fonts.ready.then(function () {
setAll();
});
function setFactor() {
let navHeightSingle = menuItems.outerHeight();
if (navigation.height() > navHeightSingle) {
let div = Math.floor(navigation.height() / navHeightSingle);
offsetFactor = div;
} else {
offsetFactor = 1;
}
}
function setAll() {
navHeight = navigation.height();
topBarHeight = topBar.height();
setFactor();
let defaultPaddingTop = menuItems.css("padding-top");
let defaultPaddingBottom = menuItems.css("padding-bottom");
offset = parseInt(defaultPaddingTop) + parseInt(defaultPaddingBottom) - parseInt(scrollPaddingTop) - parseInt(scrollPaddingBottom);
navigation.css("top", navHeight * -1).css("margin-top", navHeight);
function setFixed() {
navigation.addClass("fixed smoothed-in").css({'top': navHeight, 'margin-top': navHeight * -1});
$("body").css("padding-top", navHeight);
}
function removeScrollPadding() {
menuItems.css("padding", "");
}
$(window).scroll(function () {
var scrollPos = $(document).scrollTop();
if (!isMobileNav) {
if (!startFix) {
navigation.css("margin-bottom", "");
startFix = true;
return false;
}
if (scrollPos > topBarHeight + 1 * navHeight) {
navigation.css("margin-bottom", "0px");
menuItems.css({'padding-top': scrollPaddingTop, 'padding-bottom': scrollPaddingBottom});
setFixed();
} else if (scrollPos <= topBarHeight + offset * offsetFactor) {
navigation.css({'top': "0", 'margin-top': '0'}).removeClass("fixed smoothed-in");
$("body").css("padding-top", "");
removeScrollPadding();
if (isMobileNav) {
navigation.css("margin-top", "0");
navHeight = navigation.height();
topBarHeight = topBar.height();
removeScrollPadding();
}
}
} else {
if (scrollPos > topBarHeight && mobileFixed) {
navigation.addClass("fixed");
$("body").css("paddingTop", navHeight);
} else if (scrollPos <= topBarHeight) {
$("body").css("paddingTop", "0px");
navigation.removeClass("fixed");
}
}
});
navigation.css("margin-bottom", -1 * navHeight);
if ($(window).outerWidth() < breakingPoint) {
setMobileNav();
} else {
isMobileNav = false;
}
}
function setMobileNav() {
isMobileNav = true;
navigation.removeClass("fixed");
navigation.css({'top': '0', 'margin-top': '0', 'height': mobileNavigationHeight, 'padding-top': mobileNavigationHeight}).removeClass("smoothed-in");
navHeight = navigation.outerHeight();
navigation.css("height", mobileNavigationHeight);
}
$(window).resize(function () {
setFactor();
navHeight = navigation.height();
topBarHeight = topBar.height();
if ($(window).outerWidth() < breakingPoint) {
setMobileNav();
navigation.css("margin-bottom", "");
$("body").css("padding-top", "");
} else {
navigation.css({'padding-top': '', 'height': ''});
isMobileNav = false;
}
});
});
Wordpress jQuery
Funktioniert nicht bei jedem Theme.
Empfehle das Plugin Custom JS & CSS
Dort Script in den Footer einbinden.
Const breakingpoint = 768,// ----- Mobil-Breite
navigation = $("#masthead"),// ----- Navigations-Selektor
topbar = $("#custom-top-bar"),// ----
- Header-Selektor
mobilenavigationheight = "auto",// ----- Mobil-Höhe
menuitems = $("#masthead #primary-menu > li > a"),//----- Menü-Selektor Kindelemente
scrollpaddingtop = "10px",// ----- Wenn die Kopfzeie einklappt das Padding
scrollpaddingbottom = "10px",
mobileFixed = true; // ----- Fixiertes Menü Mobil ja / nein (true/false)
jQuery(document).ready(function ($) {
var topBarHeight,
navHeight,
offset,
offsetFactor,
startFix = false,
isMobileNav = false;
const breakingPoint = 768,
navigation = $("#masthead"),
topBar = $("#custom-top-bar"),
mobileNavigationHeight = "auto",
menuItems = $("#masthead #primary-menu > li > a"),
scrollPaddingTop = "10px",
scrollPaddingBottom = "10px",
mobileFixed = true;
document.fonts.ready.then(function () {
setAll();
});
function setFactor() {
let navHeightSingle = menuItems.outerHeight();
if (navigation.height() > navHeightSingle) {
let div = Math.floor(navigation.height() / navHeightSingle);
offsetFactor = div * 1;
} else {
offsetFactor = 1;
}
}
function setAll() {
navHeight = navigation.height();
topBarHeight = topBar.height();
setFactor();
let defaultPaddingTop = menuItems.css("padding-top");
let defaultPaddingBottom = menuItems.css("padding-bottom");
offset = parseInt(defaultPaddingTop) + parseInt(defaultPaddingBottom) - parseInt(scrollPaddingTop) - parseInt(scrollPaddingBottom);
navigation.css("top", navHeight * -1).css("margin-top", "0");
function setFixed() {
navigation.addClass("fixed smoothed-in").css({'top': navHeight, 'margin-top': navHeight * -1});
$("body").css("padding-top", navHeight);
}
function removeScrollPadding() {
menuItems.css("padding", "");
}
$(window).scroll(function () {
var scrollPos = $(document).scrollTop();
if (!isMobileNav) {
if (!startFix) {
startFix = true;
return false;
}
if (scrollPos > topBarHeight + 1 * navHeight) {
navigation.css("margin-bottom", "0px");
menuItems.css({'padding-top': scrollPaddingTop, 'padding-bottom': scrollPaddingBottom});
setFixed();
} else if (scrollPos <= topBarHeight + offset * offsetFactor) {
navigation.css({'top': "0", 'margin-top':'0'}).removeClass("fixed smoothed-in");
$("body").css("padding-top", "");
removeScrollPadding();
if (isMobileNav) {
navigation.css("margin-top", "0");
navHeight = navigation.height();
topBarHeight = topBar.height();
removeScrollPadding();
}
}
} else {
if (scrollPos > topBarHeight && mobileFixed) {
navigation.addClass("fixed");
$("body").css("paddingTop", navHeight);
} else if (scrollPos <= topBarHeight) {
$("body").css("paddingTop", "0px");
navigation.removeClass("fixed");
}
}
});
navigation.css("margin-bottom", 0 * navHeight);
if ($(window).outerWidth() < breakingPoint) {
setMobileNav();
} else {
isMobileNav = false;
}
}
function setMobileNav() {
isMobileNav = true;
navigation.removeClass("fixed");
navigation.css({'top': '0', 'margin-top': '0', 'height': mobileNavigationHeight, 'padding-top': ''}).removeClass("smoothed-in");
navHeight = navigation.outerHeight();
navigation.css("height", mobileNavigationHeight);
}
$(window).resize(function () {
setFactor();
navHeight = navigation.height();
topBarHeight = topBar.height();
if ($(window).outerWidth() < breakingPoint) {
setMobileNav();
navigation.css("margin-bottom", "");
$("body").css("padding-top", "");
} else {
navigation.css({'padding-top': '', 'height': ''});
isMobileNav = false;
}
});
})