How can I set the Menu opacity of a bootstrap navbar menu on scroll?

Question

I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px. So far so good, I changed the scroll opacity using the following code I found online:

$(document).on('scroll', function (e) {
    $('.navbar').css('opacity', ($(document).scrollTop() / 500));
});

My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work. When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.

I am sorry for my crappy English, but I hope you understand my problem :)

Edit: Here's my navbar code:

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
        </div>
        <div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#about" style="color:#fff;font-family:KlinicSlabBook;">ABOUT</a>
                </li>
                <li>
                    <a href="#work" style="color:#fff;font-family:KlinicSlabBook;">WORK</a>
                </li>
                <li>
                    <a href="#team" style="color:#fff;font-family:KlinicSlabBook;">TEAM</a>
                </li>
                <li>
                    <a href="#contact" style="color:#fff;font-family:KlinicSlabBook;">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>