Заголовок изменяет непрозрачность при прокрутке вниз

Question

Я пытаюсь изменить непрозрачность заголовка при прокрутке вниз. aproximatly 500px down. Я делаю одну страницу с заголовком infront bxslider, поэтому, когда я прокручиваю вниз, непрозрачность должна увеличиваться для заголовка, потому что текст по-прежнему должен быть доступен для чтения.

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

Я хотел бы что-то вроде этого, но я считаю, что это очень трудно редактировать

Я уже пытался искать ответы здесь, но единственное, что близко к этому есть: Header changes as you scroll down (jQuery) или Fade opacity when scrolling, но один не работает для меня, а другой тяжело понять и изменить

<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

Вот код CSS, чтобы увидеть, что заголовок actualy не непрозрачности 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; } 

Answer 1

Если фиксированная это сам ...

HTML

<header class="main-header clearfix"> 
    <a href="#Top"><img src="images/logo.svg"/></a> 
    <nav> 
     <a href="#Platenbeurs">Platenbeurs</a> 
     <a href="#voorstelling">Voorstelling</a> 
     <a href="#artiesten">Artiesten</a> 
     <a href="#Planning">Planning</a> 
     <a href="#Grondplan">Grondplan</a> 
     <a href="#PraktischeInfo">Praktische Info</a> 
     <a href="#Bestel">Bestel</a> 
    </nav> 
</header> 

CSS

.main-header{ 
    position: fixed; 
    width: 100%; 
    z-index: 101; 
    padding: 15px; 
    text-align: right; 
    background-color: rgba(0,0,0,0.2); 
    border-top: 5px solid black; 
} 
.main-header nav a{ 
    color: white; 
    text-decoration: none; 
    opacity: 1; 
} 

Javascript

$(window).scroll(function(event){ 

     if($(document).scrollTop() > 300){ 
      if(header.data('opacity') == 'start'){ 
       header.data('opacity','scrolled'); 
       header.css("background", "rgba(0,0,0,1)"); 
      } 
     }else{ 
      if(header.data('opacity') == 'scrolled'){ 
       header.data('opacity','start'); 
       header.css("background", "rgba(0,0,0,0.2)"); 
      } 
     } 
    }); 

Answer 2

Непрозрачность от заголовка уже 1. Вы не можете увеличить непрозрачность, вместо этого вы можете установить цвет фона для заголовка в прокрутке. Пожалуйста, обратитесь следующий фрагмент: http://jsfiddle.net/uy25hw21/