function Scroll() {
var top=document.getElementById('header');
var ypos=window.pageYOffset;
if (ypos>800) {1
// top.style.opacity = "0";
top.style.height=100+'px';
}
else {
// top.style.opacity= "1";
top.style.height=150+'px';
}
}
window.addEventListener("scroll", Scroll);
*{
margin: 0;
padding: 0;
}
#header {
height: 150px;
width: 100%;
position: fixed;
background: #57C7AE;
box-shadow: 2px #ccc;
transition: all 0.4s;
}
div {
height: 2000px;
}
#text div {
color: white;
font-size: 16px;
display: inline;
font-weight: bold;
text-transform: uppercase;
}
#text {
padding-right: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Effect</title>
</head>
<body>
<header id="header">
<div id="text">
<div>Lorem1</div>
<div>Lorem2</div>
<div>Lorem3</div>
<div>Lorem4</div>
</div>
</header>
<div>
</div>
</body>
</html>
Как поставить тесту отступ справа 40px и выровнять вертикально по центру