 <p><a href="https://jsfiddle.net/tmf773ab/" rel="nofollow">Is this the one you expecting?</a> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Scroll me... </p> </p> <pre><code>body { margin: 0; } nav { background: rgba(53, 145, 204, 0); position: fixed; top: 0; width: 100%; } nav ul &gt; li { display: inline-block; } .container { height: 1000px; margin-top: 100px; } $(document).scroll(function() { var dHeight = $(this).height()-$(window).height(); if (dHeight &gt;= $(this).scrollTop()) { $('nav').css('background', 'rgba(53,145,204,' + $(this).scrollTop() + ')'); } }); </code></pre>