jquery - パララックスのある意図的なオーバーラップ固定テキスト

Question

メニューでこの効果を実現しようとしています: http://www.tokiolab.it/

スライドをスクロールしながら色を変更できるようにしたい。

これは私がこれまでに持っているものです: http://tinyurl.com/6uqdjmq

しかし、オーバーラップは非常にうまく機能しているため、メニューが互いに重なっています。私はそれを望んでいません。

解決策はありますか？

ありがとう、

Answer 1

問題を正しく理解していれば、最初のスライドと 2 番目のスライドをスクロールするとヘッダーが表示されます。

まず、1 番目と 2 番目のセクションに同じヘッダー要素があります。そこから削除して、コンテナ div の後に配置します。ヘッダー風にも。を削除しposition:fixedます。

編集:: 両方の場所からヘッダーを削除し、div コンテナーの直後にヘッダー (class=dark なし) を配置する必要があります。z-index 100 を指定します。また、スクロールに関する機能を追加する必要があります。

scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
     //Change the css properties of header using jquery .css() method.
});

この方法で遊ぶことで、各ブロックのヘッダーの色を変更できます。