Vanilla Javascript. Изменение стиля элемента при прокрутке.

-2

Если у меня был простой заголовок, оформленный в фиксированном положении, как показано ниже. Как (в ванильном JavaScript) я могу изменить цвет при прокрутке, скажем, когда вы прокручиваете 200px (высота заголовка). Все примеры, которые я могу найти в stackoverflow, предназначены только для JQuery.Vanilla Javascript. Изменение стиля элемента при прокрутке.

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>

источник

2017-01-10 sdawes

Вы пробовали '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>

источник

2017-01-10 10:06:29

Это может привести вас в правильном направлении:

// 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>

источник

2017-01-10 10:30:24 PHPglue

Vanilla Javascript. Изменение стиля элемента при прокрутке.

ответ

Смежные вопросы