You can achieve this by using javascript pageYOffset property to show the div after 100px of scroll.
The pageXOffset and pageYOffset properties returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally and vertically.
The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties. These properties are read-only.
Let us see the code:
HTML :
<!-- Filename : index.html -->
<!Doctype html>
<html lang = "en-US">
<head>
<title>Show div after 100px scroll</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type = "text/javascript" src="script.js"></script>
</head>
<body>
<div>
some content
</div>
</body>
</html>CSS :
/* Filename: style.css */
body {
min-height: 2000px;
}
div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100px;
background-color: black;
}JS :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
window.addEventListener("scroll",function(){
var target = document.getElementsByTagName('div');
var val = document.getElementsByTagName('p');
if(window.pageYOffset > 500){
target[0].style.display = "block";
}
else if(window.pageYOffset < 500){
target[0].style.display = "none";
}
val[0].innerHTML = 'PageYOffset = ' + window.pageYOffset;
},false);
</script>