How to show and hide an element when scrolling the window using jquery

Question

I want to show a border effect when I'll scroll down and reach on the desired section.And it'll be hide when I'll leave that section. Is this possible using jquery?

Yes it's possible. You'll just need to write the code to do it. http://api.jquery.com — Rory McCrossan, Jul 19 '16 at 11:12
This might help: http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery — freedomn-m, Jul 19 '16 at 11:14

score 0 · Answer 1 · answered Jul 19 '16 at 15:27

Using $(document).on('scroll'), like this:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<style>
html,body {
    height:101%;
}

#box-1 {
    width:200px;
    height:200px;
    background-color:#333;
}

.border-1 {
    border: 10px solid #696969;
}
</style>
<body>
<h1 id="myTarget">This is the desire section</h1>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<div id="box-1"></div>

<script>
$(document).on('scroll', function() {
    var pos = $(this).scrollTop();
    if( pos >= $('#myTarget').offset().top){
        $("#box-1").addClass("border-1").show();
    } else {
        $("#box-1").removeClass("border-1").hide();
    }
})
</script>
</body>
</html>

How to show and hide an element when scrolling the window using jquery

1 Answers1