I have image button:
<a href="#our-apps"><img src="assets/img/arrow-down.png" width="350"/></a>
<div class="main" id="our-apps">
<section>
<h1>Our Apps</h1>
<img src="assets/img/htc.png" align="centerleft" alt="HTC" />
<img src="assets/img/htc.png" align="centerright" alt="HTC" />
</section>
</div>
One way of achieving that is to watch window scroll and check if your div is within visible area
$(window).on('scroll', function(){
if($(this).scrollTop() + $(this).innerHeight() > $('#our-apps').offset().top){
$('#our-apps').addClass('visible');
}
});
scss
#our-apps{
opacity: 0;
transition: opacity .5s ease-in-out;
&.visible{
opacity: 1;
}
}
Why I used opacity instead of jquery's hide/show is because i need to het div offset - and if it has "display: none" property, offset equals 0.
See it here: https://jsfiddle.net/auzxqx42/