$html.addClass('header-fixed');

$html.addClass('header-fixed'); | Problem mit JS

Liebes Forum,

ich habe ein Template, welches auf <html> bei scroll eine klasse setzt.

Das ganz sieht im Code so aus:

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(); }); })();

---> Kann mir jemand sagen, wie ich das JS erweitere, dass es die Klasse bei < 768px setzt?

Ich bin was JS angeht leider totaler Anfänger.

Vielen Dank schonmal im Voraus!

JavaScript bei < 768px

Hallo Potti2012,

Genauso wie du $(window).scrollTop(); abgefragt hast, gibt es noch andere Werte.
Z.B. :
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height

Hiermit würde ich es versuchen.

if (windowWidth < 768) { ...

MfG
Hans-Jürgen

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(); }); })(); });

Hallo Potti2012,

ich gehe aus von dem JavaScript-Code bei dem du die Klasse .header-fixed setzt ,wenn scrollTop >= setFixed ist. Auch gehe ich davon aus das dieser Code funktioniert.

Du möchtest jetzt zusätzlich zu der einen Bedingung eine zweite Bedingung hinzufügen.
Also muss die zweite Bedingung auch dort stehen wo die erste Bedingung geprüft wird "if (scrollTop >= setFixed) {".
Da beide Bedingungen erfüllt sein müssen must du beide Bedingungen mit "and" verbinden. "if (Bedingung 1) and (Bedingung 2) {".

Z.B.:
Füge var window_width = $(window).width() hinzu und ergänze if (scrollTop >= setFixed) and (window_width < 768) {
Dann sollte es funktionieren.

MfG
Hans-Jürgen

Alternativ die eigentliche Abfrage auch so: https://community.contao.org/de/show...l=1#post507951

Oder mit Nutzung von matchMedia():
https://www.w3schools.com/jsref/met_win_matchmedia.asp
https://caniuse.com/#feat=matchmedia

Die Bedingung(en) selbst müssen dennoch entsprechend gesetzt werden ...