制作社交图标，然后显示 - 然后再次隐藏

Question

我试图让我的社交图标在一定量的滚动后显示，但然后再以一定的长度消失。

我已准备好让它们第一次出现，但不会消失。目前，在＆gt; 950图标显示。例如，如何使它们在1500再次消失？

这是我目前的代码：

＆＃13;

＆＃13;

$(document).ready(function(){
$('.hide-show').hide(); 
$(window).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 950) {
        $('.hide-show').fadeIn();
    } else {
        $('.hide-show').fadeOut();
    }
});
});

＆＃13;

.fa-facebook {
  background: #444444;
  opacity: 0.5;	
  color: white !important;
border: 2px solid white;	
}

.fa-twitter {
  background: #444444;
  opacity: 0.5;
  color: white !important;
border: 2px solid white;		
}
.fa-linkedin {
  background: #444444;
  opacity: 0.5;
  color: white !important;
border: 2px solid white;		
}			
/*social*/
.fa-social {
  padding: 10px;
  font-size: 50px;
  width: 100px;
  text-align: center;
  text-decoration: none;
  margin: 0;
}
.fa:hover {
    opacity: 0.9;
}
#social-container{
    position:fixed;
  left: 0;
	top:35vh;
    display:flex;
    flex-direction:column;
}

＆＃13;

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div style="margin-bottom:900px;">
hello
</div>
<div id="social-container" class="hide-show">
<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-linkedin" id="linkedin"></a>
<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-facebook" id="facebook"></a>
<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-twitter" id="twitter"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

怎么样：

$(window).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 1500) {
        $('.hide-show').fadeOut();
    } else if (y > 950) {
        $('.hide-show').fadeIn();
    } else {
        $('.hide-show').fadeOut();
    }
});

Answer 2

向if()添加AND条件以创建BETWEEN条件

// hide them between 950 and 1500
if (y > 950 && y < 1500) {
   ....