How to increase opacity of an image when scrolling?

How to increase opacity of an image when scrolling?

I have a fixed top bar / nav bar on my website and in the center I have a
logo. I want this logo to start off as hidden when a user comes to the
page. As the user scrolls down (around 200 pixels), I want this logo to
fade in. When they scroll back up to the top, I want the logo to fade back
out.
Here is the script I'm using right now:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('#logo').fadeIn(1000);
}
});
});
</script>
There are two problems:
1) The nav-bar to the right of the logo is also starting off as invisible
and fading in, though I don't want it to (it doesn't have id=logo). I'm
not sure why this is happening.
2) The logo is not fading out when I scroll back up. I know I need to use
the fadeOut function but when I tried basically reversing the fadeIn
function, I got some funky results.
Here is my site url: http://bestdressedghetto.com/displayPosts.php
And here is a snippet of the relevant topBar code (it is a php file that
is included in all the pages that should have a top-bar....the javascript
code above is in displayPosts.php):
<header>
<center><a href="displayPosts.php" id="logo">
<img class="img-responsive" src="images/bdg-logo-floral.png" />
</a></center>
<nav style="display:block">
<a style="font-size:30px; position: relative; top: -5px;" href="#"
id="menu-icon"></a>
<ul>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="displayTapes.php">Tapes</a></li>
<li><a class="nav-link" href="#">Subscribe</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</header>
Any and all help is very-well appreciated!