I've managed to get my navigation menu to stay fixed to the top of the window during scrolling and turn off the transparency using the below code.

`HTML and JS`

```
<section id="menu"> 
    <script>
        var $window = $(window),
        $stickyEl = $('#menu'),
        elTop = $stickyEl.offset().top;

        $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
        });
    </script>
<div class="menuLogo"><a href="/"><img src="/_images/logo.png" width="110" height="60" alt=""/></a></div>
    <ul class="menuNav">
        <li><a href="/contact">CONTACT</a></li>
        <li><a href="/about">ABOUT</a></li>
        <li><a href="/ourteam">OUR TEAM</a></li>
        <li><a href="/portfolio">PORTFOLIO</a></li>
        <li><a href="/services">SERVICES</a></li>
    </ul>
</section>

```

`CSS`

```
#menu.sticky {
    position: fixed;
    top: 0;
    background-color: rgba(51, 51, 51, 1);
    -o-transition: .75s;
    -ms-transition: .75s;
    -moz-transition: .75s;
    -webkit-transition: .75s;
    transition: .75s;
}

```

This works really nicely when starting from the top and scrolling down. The nav menu goes a solid colour within a nice transition window. When I scroll back to the top of the screen though, it goes back to its semi-transparent form instantly.

How can I modify my code so that the fade effect happens when scrolling down from the top as it does now, but also scrolling up to the top?

EDIT

Thanks to Sandesh, I fixed it. I needed to slightly modify the code he provided, but it put me on the right track. The final code for my js is as below:

```
var $window = $(window),
    $stickyEl = $('#menu'),
    elTop = $stickyEl.offset().top;

    $window.scroll(function() {
        if($(window).scrollTop() > elTop){
            $('#menu').addClass("sticky");
        } else {
            $('#menu').removeClass("sticky");
            $('#menu').addClass("top");
    }
});

```