Hallo hjo,
ich bekomme es leider nicht hin. Ich poste im folgenden nochmal meinen vollständigen Code.
Meine Erwartung ist, dass nicht nur wenn ich scrolle sondern zusätzlich auch wenn der Browser kleiner 768 px ist, die Klasse auf HTML gesetzt wird.
--> ich habe so versucht:
HTML-Code:
if ($(window).width() < 768) {
$html.addClass(‘header-fixed’);
} else {
$html.removeClass(‘header-fixed’);
}
})();
Aber auch hier weiß ich nicht genau an welche Stelle ich den Codeschnippsel einfügen muss und ob noch was fehlt. Egal wie ich es versucht habe, es hatte zur Folge, dass der Header dann bei Scroll auch nicht mehr sticky war.
+++++++++
HTML-Code:
$(document).ready(function(){
// header scroll behaviour
(function() {
var $html = $('html');
var $headerMain = $('.jsHeaderMain');
var $headerMainSpacer = $('.jsHeaderMainSpacer');
if (!$headerMain.length) return;
var setFixed =
$headerMainSpacer.offset().top + ($headerMainSpacer.outerHeight() / 2);
var handleFixedHeader = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop >= setFixed) {
$html.addClass('header-fixed');
} else {
$html.removeClass('header-fixed');
}
};
handleFixedHeader();
$(window).on("scroll", function(){
handleFixedHeader();
});
})();
// header mobile trigger
(function() {
var $html = $('html');
var $headerMobile = $('.jsHeaderMobile');
var $headerMobileTrigger = $('.jsHeaderMobileTrigger');
$headerMobileTrigger.on("click", function(e){
e.preventDefault();
$html.toggleClass("header-mobile-opened");
$headerMobile.stop().slideToggle("slow");
});
})();
// header mobile navigation
(function() {
var component = {
selector: {
mobileNav: '.jsHeaderMobileNav',
submenuLink: '.level_1 > li.submenu > a',
submenuActive: '.level_1 > li.submenu > .trail, .level_1 > li.submenu > .active',
submenuLevel: '[class*="level_"]',
},
};
var $headerMobileNav = $(component.selector.mobileNav);
var $submenuActives = $headerMobileNav.find(component.selector.submenuActive);
var $submenuToggles = $headerMobileNav
.find(component.selector.submenuLink)
.add($submenuActives);
$submenuActives.each(function(){
$(this).addClass('expanded');
});
$submenuToggles.on("click", function(e){
// e.preventDefault();
var $this = $(this);
$this.toggleClass('expanded');
$this.next(component.selector.submenuLevel).stop().slideToggle();
});
})();
});
Lesezeichen