ani_css ani_css - 3 months ago 15
jQuery Question

When scroll page down appear and dissapear element

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.

my codes

enter image description here

HTML

<html>
<head>

</head>
<body>

<ul class="sticky">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>


CSS

.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}


(in my css I have sticky element which is none appear)

JQUERY

$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});


click to see on codepen

Answer

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:

$(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
            $(".sticky").show();
        }else{
            $(".sticky").hide();
        }
    });
});