Vanilla Javascript. Ändern Sie den Stil des Elements beim Scrollen.

-2

Wenn ich einen einfachen Header hatte, styled in einer festen Position, wie unten. Wie (in Vanilla JavaScript) könnte ich die Farbe beim Scrollen ändern, sagen Sie, wenn Sie 200px runterscrollen (die Höhe der Kopfzeile). Alle Beispiele, die ich auf Stackoverflow finden kann, sind nur für JQuery.Vanilla Javascript. Ändern Sie den Stil des Elements beim Scrollen.

body { 
 
    height: 2000px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<body> 
 

 
    <header> 
 
     <h1>This is the header I want to change</h1> 
 
    </header> 
 

 
</body>

Quelle

2017-01-10 sdawes

Haben Sie versucht "if (scrollTop === 200)"? – PHPglue

function runOnScroll() { 
 
    if (document.body.scrollTop >= 200) { 
 
    var h1 = document.getElementsByTagName("h1")[0]; 
 
     h1.style.color = "green"; 
 
     } 
 
}; 
 
window.addEventListener("scroll", runOnScroll);

body { 
 
    height: 2000px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<body> 
 

 
    <header> 
 
     <h1>This is the header I want to change</h1> 
 
    </header> 
 

 
</body>

Quelle

2017-01-10 10:06:29

Dies kann Sie in die richtige Richtung führen:

// external.js 
 
var doc, bod, htm; 
 
addEventListener('load', function(){ 
 
    doc = document; bod = doc.body; htm = doc.documentElement; 
 
    addEventListener('scroll', function(){ 
 
    doc.querySelector('header').style.backgroundColor = htm.scrollTop > 199 ? 'blue' : 'red'; 
 
    }); 
 
});

/* external.css */ 
 
body{ 
 
    height: 2000px; 
 
} 
 
header{ 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <header> 
 
    <h1>This is the header I want to change</h1> 
 
    </header> 
 
</body> 
 
</html>

Quelle

2017-01-10 10:30:24 PHPglue

Vanilla Javascript. Ändern Sie den Stil des Elements beim Scrollen.

Antwort

Verwandte Themen