Hinzufügen von Klassen/IDs an verschiedenen Punkten auf einer Seite

Um Verwechslungen zu vermeiden und bevor Sie weiterlesen, ist dies NICHT "wie viele Pixel runter", sondern zum Beispiel <section id="smaller"> dann würde es eine Klasse hinzufügen. Ich bin neu in Javascript, also bitte nehmen Sie das mit einem Körnchen Salz. Vielen Dank.Hinzufügen von Klassen/IDs an verschiedenen Punkten auf einer Seite

Ich versuche, den Header zu ändern, indem Sie der Headerdatei eine neue Attributklasse hinzufügen. Der folgende Code funktioniert auf dem Desktop, wenn sich die Breite nicht ändert, aber was passiert, wenn Sie auf einem Telefon und Ihrem Design reagieren? Ja, genau deshalb brauche ich deine Hilfe. Ich habe schon so viele Dinge ausprobiert und weiß nicht, wie ich dieses Setup bekommen soll, wie ich es möchte. Ich bin neu bei Web Dev und das ist eine meiner ersten Websites.

Mein Code jetzt:

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > 606) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

Paar Dinge, die ich brauche zu klären, und/oder wenn Sie ein wenig verwirrt:

der Header die tatsächliche <header> nicht a div mit einer Header-Klasse oder ID.
wie gesagt, das jetzt funktioniert, ist aber nur sinnvoll, für eine feste Breite für jede Bildschirmgröße
ich diesen Code bin auch auf einer js-Datei, die kurz vor dem Ende des <body>-Tages verknüpft ist.
„606“ die Länge der Seite nach unten in Pixel ist, wenn die Änderung geschieht

Gibt es eine Möglichkeit, ein Attribut in den Header hinzuzufügen, wenn Sie einen bestimmten Platz auf der Webseite zu erreichen? Wenn es mir irgendwie helfen könnte, wäre das großartig. Vielen Dank für das Lesen und den Rest des Tages genießen. :)

Quelle

2016-04-04 hermitspike

Verwenden Sie element.getBoundingClientRect(), um Bildschirmpositionsinformationen Ihres Objekts abzurufen. Dadurch erhalten Sie ein Objekt, das unten, Höhe, links usw. für Ihre Aufgabe enthält, die Sie möglicherweise verwenden möchten top und height. In Kombination mit window.innerHeight können Sie programmieren, was Sie wollen.

window.addEventListener('scroll', function() { 
    var r = header.getBoundingClientRect(); 
    if (r.top < 300) 
     header.setAttribute("class", "smaller"); 
    else 
     header.removeAttribute("class"); 
});

Allerdings gibt es wahrscheinlich bessere Möglichkeiten, dies zu tun, haben Sie einen Blick auf „CSS Media Queries“, bieten sie fast alles, was Sie benötigen könnten Ihre Seiten reaktionsfähiger zu machen.

Quelle

2016-04-04 10:24:20 ZPiDER

Wäre es zu viel verlangt nach einer Implementierung? : P Sorry, irgendwie überwältigt jetzt. Es wäre sehr geschätzt. Vielen Dank! – hermitspike

Ich habe eine Beispielimplementierung hinzugefügt, ich weiß nicht genau, was Sie vorhaben, aber dieser Code fügt eine Klasse zu einem Element hinzu, das über 300px auf dem Bildschirm lief. TIPP: Werfen Sie einen Blick auf jQuery, wenn Sie neu in JS sind, es wird Ihnen sehr dabei helfen, Dinge elegant zu machen. – ZPiDER

Die andere Antwort, die von @caramba gepostet wurde, half mir bei der Erklärung meines Ziels = Wenn Sie zuerst prüfen, wo sich ein Element auf einer Seite befindet und das auf 'distanceY' setzen, können Sie den Rest des Codes noch verwenden. Dies ist ein Weg, es zu tun, aber es sollte Ihnen helfen, ... hoffentlich zu verstehen. Danke für deine Antwort, ich werde mich darum kümmern und es ausprobieren. – hermitspike

Ich habe einen Weg gefunden, es mit .position(); zu tun. Hier ist meine Erklärung:

#sub-services ist das Element, das ich die Position bekommen möchte.

el ist die Position der #sub-services.

Und smaller ist eine Klasse hinzugefügt zu <header>.

Hier ist der vollständige Code, die ich in meiner Website mit:

var el = $("#sub-services"); 
var position = el.position(); 

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > position.top) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

Es ist viel einfacher es mit Jquery zu tun. Danke an @ Caramba, dass sie mich in die richtige Richtung weisen.

Quelle

2016-04-04 11:25:06 hermitspike

Vielen Dank für alles. – hermitspike

Es ist, dass Ihr Kommentar hilfreich war, nicht die "CSS Media Queries". Ehrlich gesagt nicht versuchen, hasserfüllt zu sein. Und ich kann keine Kommentare aufziehen. :/+ Ich muss 2 Tage warten, bis meine Antwort akzeptiert wird. – hermitspike

Hinzufügen von Klassen/IDs an verschiedenen Punkten auf einer Seite

Antwort

Verwandte Themen