純粋なCSS3視差付スティッキーヘッダーの問題

Question

私はサイトを構築しており、非常に長いページを持っています。純粋なCSS3を使用して視差を追加することにしました。

私はここからだCSS3視差コード：私たちは下にスクロールするとき

codepen.io/keithclark/pen/JycFw

その後、我々はスティッキーヘッダーを適用することを決定したが、気づく、それは表示されませんでした（約180ピクセル）。

http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/

私は問題は「純粋CSS3」視差使用していることであることを発見の視点：1pxの; 'ここからコードを得た場所へのリンクがあります身体の要素に一度それを取り除くと、スティックヘッダーは機能しますが、視差は機能しません。

私は、視差とスティックの両方のヘッダーを一緒に処理しようとしています。

以下は私が取り組んでいるリンクです。

http://falconcropprotection.com/home.htm

もちろん、あなたがスクロールダウンしたときにスティックヘッダがどのように機能するかを見ることができます。しかし、視差はありませんし、 'FrightKiteは、永遠に飛ぶように見える'を検索することによって見つけることができ、それは視差画像にあなたを連れて行くでしょう。

そのためのHTMLは単純です：

CSSは、ヘッド部に埋め込まれ、あなたの便宜のためにここに貼り付けられます：

.slide { 
    position: relative; 
    /*padding: 5vh 10%;*/ 
    min-height: 180vh; 
    width: 100vw; 
    box-sizing: border-box; 
    transform-style: inherit; 
    background-repeat:no-repeat; 
} 

/*img { 
    position: absolute; 
    top: 50%; 
    left: 35%; 
    width: 320px; 
    height: 240px; 
    transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); 
    padding: 10px; 
    border-radius: 5px; 
    background: rgba(240,230,220, .7); 
    box-shadow: 0 0 8px rgba(0, 0, 0, .7); 
} 

img:last-of-type { 
    transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg); 
} 
*/ 
.slide:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left:0; 
    right:0; 
} 

.title { 
    width: 50%; 
    padding: 5%; 
    border-radius: 5px; 
    background: rgba(240,230,220, .7); 
    box-shadow: 0 0 8px rgba(0, 0, 0, .7); 
} 


.slide, .slide:before { 
    background: 50% 30%/cover; 
} 


#slide1:before { 
    background-image: url("/images/home-bg.jpg"); 
    transform: translateZ(-1px) scale(2); 
    z-index:-1; 
} 

#slide2 { 
    background-image: url("http://lorempixel.com/640/480/abstract/3/"); 
    background-attachment: fixed; 
} 

ここスティッキーヘッダーのためのJSです。

<script> 
$(window).scroll(function() { 
if ($(this).scrollTop() > 180){ 
    $('#subhead').addClass("sticky"); 
    } 
    else{ 
    $('#subhead').removeClass("sticky"); 
    } 
}); 
</script> 

Answer 1

position: sticky;を使用して、純粋なCSSのスティッキヘッダーのブラウザサポート表を通じて広がり、最近の機能が実際にあります。

あなたのコードの多くを見ることなく、何が間違っているのか正確には分かりませんが、通常、粘着性のあるヘッダーはclickイベントによってトリガーされません。

Answer 2

純粋なCSS3視差をスティッキーヘッダーで使用することができませんでした。そのため、問題を解決するためのスクリプトを作成することにしました。

グーグルネットの後、そこに視差スクリプトのバリエーションがたくさんありました。ほとんどの場合、ほとんどの場合は問題なく動作しますが、私はスティッキーヘッダーとの競合の問題で終わりました。これらのスクリプトの一部は、奇妙なやり方で実装するのが難しいものでした。私はそれをするために私の目を閉じることができるようにとてもシンプルなものでした。

私はこの1つはちょうどそれをすることが分かっ：、シンプル

http://ianlunn.co.uk/plugins/jquery-parallax/

道を、少なくとも私にとっては。すべてのデバイスで動作するようです。