dynamische CSS-Eigenschaften mit jQuery (auf Bildlauf)

Question

Ich habe einen Heldenabschnitt, der ein Hintergrundbild hat. Ich möchte einen Parallax-Effekt erstellen, indem ich die background-position Eigenschaft auf Scroll bearbeiten. Ich habe eine JavaScript-Datei, die unten:

$(document).ready(function() { 
    $(window).on('scroll', function() { 
     // Parallax effect 
     parallax.effect(); // TODO: rename this function 
    }); 
}); 

// Global variables 
var currentWindowPos = $(window).scrollTop(); 

var parallax = { 
    // Variables 
    element: $('.hero.hero-bg'), 
    bgPosition: 0, 

    // Functions 
    effect: function() { 
     $(parallax.element).css({ 
      'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px' 
     }); 
    } 
}; 

ich andere dynamische Effekte wie das Hinzufügen von Klassen zu der Navigationsleiste entfernt, sobald die Seite über einen bestimmten Punkt gescrollt wurde. Ich kann in Chrome sehen, dass das Element die dynamische background-position Eigenschaft erhält, aber das Bild scheint nichts zu tun.

In Chrome, wenn ich manuell in Developer Tools gehen und die background-position Eigenschaft hinzufügen und meine Pfeiltasten verwenden, um den Wert im Textfeld zu erhöhen oder zu verringern, kann ich das Bild nach oben und unten/links oder rechts bewegen.

auch in Chrome, wenn ich untick die CSS-Eigenschaft im element.style Abschnitt versuchen, es nicht einen Streik durch, genau wie andere Eigenschaften erhalten, wenn sie deaktiviert sind. Siehe unten.

Könnte jemand erklären, warum dieses Problem auftritt, und jemand die Lösung bieten könnte?

Hier ist ein JSFiddle für die Person in den Kommentaren.

Vielen Dank im Voraus.

Answer 1

Sie verwenden eine Variable mit einem Wert, der sich nicht ändert.

var currentWindowPos = $(window).scrollTop(); 

Variable currentWindowPos den anfänglichen scrollTop Wert hat, ist, dass Null. Du aktualisierst es nie. Wie ich feststellen kann, versuchen Sie, einen Parallax-Effekt auf Ihr Bild anzuwenden. Versuchen Sie, diese Linie zu ändern

'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px' 

zu so etwas wie dieses

'background-position': 'center -' + $(window).scrollTop() * 0.5 + 'px' 

$(document).ready(function() { 
 
    $(window).on('scroll', function() { 
 
     // Parallax effect 
 
     parallax.effect(); // TODO: rename this function 
 
    }); 
 
}); 
 

 
var parallax = { 
 
    // Variables 
 
    element: $('.hero.hero-bg'), 
 
    bgPosition: 0, 
 

 
    // Functions 
 
    effect: function() { 
 
     $(parallax.element).css({ 
 
      'background-position': 'center -' + $(window).scrollTop()*0.5+'px' 
 
     }); 
 
    } 
 
};

.hero { 
 
    width: 100%; 
 
    height: 34rem; 
 
    display: table; 
 
    position: relative; 
 
    background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7)); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.hero.hero-bg { 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.hero.hero-bg:after { 
 
    width: 100%; 
 
    height: 34rem; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7)); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.hero .inner-wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero hero-bg" style="background-image: url('https://i.ytimg.com/vi/eNB8HLrxcD4/maxresdefault.jpg');"> 
 
    <h1>Hero section</h1> 
 
</div> 
 

 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p>

Natürlich können Sie die *0.5 bearbeiten, um die Geschwindigkeit einzustellen.