Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" element quickly toggling between classes. How can I successfully hide the div when it reaches the top of the page and display it again once it starts moving down?
$(function() {
$(document).scroll(function() {
var distance_from_top = $("#backgroundtitle h1").offset().top;
if (($(window)).scrollTop() > distance_from_top) {
$("#backgroundtitle h1").toggleClass("hidetitle");
}
if (($(window)).scrollTop() < distance_from_top) {
$("#backgroundtitle h1").toggleClass("hidetitle");
}
});
});@charset "utf-8";
html {
height: 100%;
margin: 0;
font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
}
body {
height: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#header {
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
line-height: 50px;
position: fixed;
top: 0;
}
#header {
margin: 0 auto;
display: block;
}
#header ul {
list-style-type: none;
margin: 0;
text-align: center;
padding: 0;
}
#header ul li {
display: inline;
text-align: center;
}
#header a {
color: #FFFFFF;
padding: 0 5%;
margin: 0;
text-align: center;
}
#homeimage {
background: url(Images/Home_Image.jpg) no-repeat center center;
background-size: cover;
height: 100%;
position: relative;
top: 0;
z-index: -100;
width: 100%;
display: block;
}
#background {
width: 100%;
height: 100%;
line-height: 100%;
text-align: center;
display: table;
background: rgba(0, 0, 0, 0.2)
}
#background h1 {
display: table-cell;
vertical-align: middle;
font-size: 100px;
color: #FFFFFF;
font-weight: 100;
}
#backgroundtitle {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
#backgroundtitle h1 {
font-size: 100px;
color: #FFFFFF;
font-weight: 100;
text-align: center;
display: inline;
padding: 0;
margin: 0;
}
#container1 {
height: auto;
background-color: #00A3FF;
overflow: hidden;
}
#container1 h1 {
padding: 0;
padding-top: 5%;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#container1text {
width: 50%;
padding: 2.5%;
float: left;
}
#container1text p {
font-size: large;
}<body>
<div id="header">
<ul>
<li><a href="#homeimage">Home</a>
</li>
<li><a href="#container1">Introduction</a>
</li>
</ul>
</div>
<div id="homeimage">
<div id="background">
<div id="backgroundtitle">
<h1>Title</h1>
</div>
</div>
</div>
<div id="container1">
<h1>Introduction</h1>
<div id="container1text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cumque, id, quasi iste illum dolorum libero vero voluptate labore ullam voluptatum aliquam tempore dolor molestiae debitis hic ipsam vel quidem.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dignissimos magni nulla cupiditate nisi veritatis hic ullam saepe dolor numquam recusandae assumenda aspernatur perspiciatis non similique ipsam architecto sapiente excepturi!</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, ducimus, atque, delectus, fugiat adipisci animi deserunt culpa doloremque ea impedit natus dolores amet veniam vitae eaque eligendi fugit dolorum hic!</p>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>