Youtube link - click here
Source code:
<!DOCTYPE html>
<html>
<head>
<title>
geeks
</title>
<style>
#box {
width: 100%;
height: 20px;
padding: 10px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0px;
transition: 2s;
}
#content {
width: 200px;
text-align: justify;
margin-top: 50px;
}
#box>img {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<img src="https://tse3.mm.bing.net/th?id=OIP.0ufq0_64SjNWc_29n3TgOAAAAA&pid=Api&P=0&w=300&h=300"> GEEKSFORGEEKS
</div>
<div id="content">
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. Lorem ipsum is typically a corrupted
version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. Versions of the Lorem ipsum text have been used
in typesetting at least since the 1960s, when it was popularized by advertisements for Letraset transfer sheets.[1] Lorem ipsum was introduced to the digital world in the mid-1980s, when Aldus employed it in graphic and word-processing templates
for its desktop publishing program PageMaker. Other popular word processors, including Pages and Microsoft Word, have since adopted Lorem ipsum,[2] as have many LaTeX packages,[3][4][5] web content managers such as Joomla! and WordPress, and
CSS libraries such as Semantic UI.[6]
</div>
</div>
<script>
var scroll;
window.onscroll = function() {
scroll = document.getElementById("content").getBoundingClientRect().y;
if (scroll < -50) {
document.getElementById('box').style.fontSize = "0px";
} else {
document.getElementById("box").style.fontSize = "16px";
}
}
</script>
</body>
</html>
Post a Comment