2016-08-26 11 views
0
var nav = document.getElementsByTagName('nav')[0]; 

window.onscroll = function(){ 
    var supportPageOffset = window.pageXOffset !== undefined, 
     isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat'), 
     top = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop, 
     calc = Math.abs(1 - (top + 200)/200); 

    if(calc <= '1'){ 
     nav.style.background = 'rgba(0,0,0,0.'+calc+')'; 

     console.log('rgba(0,0,0,0.'+calc+')'); 
    } 
} 

Wenn ich es trösten. Die Funktion funktioniert gut. Aber wenn ich das Element überprüfe. Nichts passiert damit.Der Hintergrundstil wird beim Scroll-Ereignis nicht aktualisiert. (Nicht-jQuery)

JSFiddle: https://jsfiddle.net/238rjf9a/1/

Scroll es und Sie können sehen, was ich rede.

Hinweis: Ich verwende jQuery nicht für dieses Projekt.

Danke für diejenigen, die helfen werden.

Antwort

3

Sie haben einen Überschuss 0. in Ihrem Stil.

Try this: rgba(0,0,0,'+calc+')

+1

Arbeitete wie Charme Kumpel. Vielen Dank. Ich werde Ihre Antwort in 10 Minuten akzeptieren. Ich weiß nicht, warum stackoverflow mich 10 Minuten warten muss. –

+0

Sie sind herzlich willkommen :-) – PerfectPixel

0

Ihre calc bereits die führende . Bitte ändern Sie Ihren Code:

if(calc <= '1'){ 
    nav.style.background = 'rgba(0,0,0,'+calc+')'; 

    scr.innerHTML = 'Srolled = rgba(0,0,0,'+calc+')'; 
} 

Fiddle: https://jsfiddle.net/238rjf9a/2/

Verwandte Themen