I'm trying to have my header change opacity when you scroll down say **aproximatly 500px down**. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.

<http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/>

I'd like something like this but I find it very hard to edit

I already tried to look for answers here but only thing close to this is: [Header changes as you scroll down (jQuery)](https://stackoverflow.com/questions/6687580/header-changes-as-you-scroll-down-jquery) or [Fade opacity when scrolling](https://stackoverflow.com/questions/16653543/fade-opacity-when-scrolling) but the one doesn't work for me and the other is to hard to understand and change

```
<header class="main-header">
        <img src="images/logo.png"/>
        <nav>
            <a id="active" href="#Platenbeurs">Platenbeurs</a>
            <a href="#Voorstelling">Voorstelling</a>
            <a href="#Planning">Planning</a>
            <a href="#Grondplan">Grondplan</a>
            <a href="#PraktischeInfo">Praktische Info</a>
            <a href="#Bestel">Bestel</a>
        </nav>
</header>

```

**EDIT**

Here is the css code to see that the header is actualy not opacity 1.

```
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }

```