Ändern Sie CSS, das an das HTML-Tag angehängt ist, abhängig von der Seite?

So habe ich eine Homepage, die Scrollmagic.js verwendet, um auf der Seite nach oben und unten zu blättern, und das erfordert, dass das HTML-Tag relativ unberührt bleibt. Auf jeder anderen Seite muss das HTML-Tag eine Höhe von 100% haben, oder das CSS-Element mit dem sticky footer funktioniert nicht, aber wenn ich der Homepage 100% height hinzufüge, dann scrollt es nicht. Gibt es einen Weg in CSS oder jQuery, der die HTML-Höhe ändern kann, abhängig davon, auf welcher Seite der Benutzer ist?Ändern Sie CSS, das an das HTML-Tag angehängt ist, abhängig von der Seite?

oder gibt es eine klebrige Fußzeile Methode gibt, die nicht mit einer Höhe von 100% auf dem HTLM-Tag wie nicht verwendet:

html, body { 
     height: 100%; 
    }

dank

Quelle

2016-08-03 Nsokyi

Ich weiß nicht, wie schmutzig es ist, aber eine andere CSS-Datei erstellen, die nur diesen einen Style-Block hat. Fügen Sie diese CSS-Datei zu all diesen Seiten hinzu, wo sie benötigt werden. Achten Sie darauf, die neue Datei zu priorisieren (fügen Sie sie nach dem regulären hinzu). Verwenden Sie bei Bedarf '! Wichtig'. –

Hmm, das hat mich nur zum Nachdenken gebracht, da es eine Jekyll-Seite ist, könnte ich einen schmuddeligen kleinen Inline-Stil für die Post-Seiten verwenden, danke. – Nsokyi

oder das, ja. obwohl Inline ein bisschen unordentlicher ist. Was, wenn Sie später etwas ändern müssen. dann müssen Sie alle Seiten einzeln ändern. Es ist besser, wenn alle Seiten auf eine Quelle verlinken. –

Sie die URL verwenden könnten zu prüfen, welche Seite Sie sind eingeschaltet und passen das CSS entsprechend der Seite an.

JavaScript

window.onload = function() { 
    var url = window.location.href; 
    var pageurl = url.substring(url.indexOf('.com')+4,url.length); 
    var html = document.querySelector('html'); 

    if(pageurl !== "/index.html") { 
     /* adjust css if we're not on the index.html page */ 
     html.style.height = "100%"; 

    } 
}

Quelle

2016-08-03 15:22:34

Danke, das sieht aus wie ich bin, aber ich bekomme ein "Uncaught TypeError: url.indexof ist keine Funktion"? – Nsokyi

@Nsokyi Es ist meine Schuld, ich habe einen Fehler gemacht und eine Großzahl O in 'indexOf' vergessen. Ich habe meine Antwort aktualisiert. –

Danke, das ist genial! – Nsokyi

Ändern Sie CSS, das an das HTML-Tag angehängt ist, abhängig von der Seite?

Antwort

Verwandte Themen