I'm trying to make my social icons show after a certain amount of scroll but then disappear again at a certain length. 

I'm all set with making them appear on the first time, but not to disappear. Currently, at > 950 the icons show. How do I make them disappear again at 1500 for example?

This is my current code:

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

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

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