So i wanted to make this simple navigation go from background transparent to background bright green gradually. I got the idea of using the $(window).scrollTop() jQuery function to get the distance from top and divide it by 10 to get a smooth transition, but it still feels kinda snappy when i run it in chrome and firefox.

Is there another (smoother and more modern) way of doing this?

I really wanted to make the design very simple to induce the flat design art and give the website a lot of functionality to give it a modern vibe of simple but practical.

FYI:

i dont want dropdowns, expansions etc. so dont suggest them.
Also dont judge the color.
The activator link is for mobile(where i have a dropdown). so dont be bothered to mind it.

Markup: 

```
<nav>
                <a id="activator"></a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Log out</a></li>
                </ul>
    </nav>

```

Style:

```
<style>
nav{
    position: fixed;
    width: 100%;
    z-index: 2;
    height: 2em;
}
nav ul{
    overflow: hidden;
    background: #1adc8c;
    height: auto;
}
nav ul li{
    float: none;
    text-align: center;
    width: 100%;
    margin: 0%;
    padding: 0px;
    font-weight: bold;
    font-size: 1.1em;
}
nav ul li a{
    display: block;
    color: #FFF;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 1.2em;
    padding: 20px;
}
</style>

```

JQ and JS:

```
if(window.innerWidth > 400){
        $(window).scroll(function(){
        var fromTop = $(this).scrollTop();
        if(fromTop >= 100){
            $("nav").css({
                "background" : "rgba(26, 220, 140,0." + fromTop/10 + ")"
            });
            if(fromTop >= 600){
                $("nav").css({
                    "background" : "rgba(26,220,140,1)"
                });
            }
        }else{
            $("nav").css({
                "background" : ""
            }); 
        }
        });
    }

```