让社交图标隐藏，然后显示 - 然后再次隐藏答案

【问题标题】：Making social icons hide, then show - then hide again让社交图标隐藏，然后显示 - 然后再次隐藏
【发布时间】：2018-05-06 20:56:50
【问题描述】：

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

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

这是我当前的代码：

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

.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;
}

        <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>

【问题讨论】：

标签： jquery html

【解决方案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();
    }
});

【讨论】：

【解决方案2】：

将 AND 条件添加到您的 if() 以创建 BETWEEN 条件

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

【讨论】：