2016-05-21 7 views
0

シンプルなjqueryですばらしいスクロール効果を得ようとしています。しかし、それは動作していません。これは、テスト環境でまったく同じコードで動作します。スクロールのCSS計算に追加

ページを開いたときにコードが読み込まれているようで、コンソールにエラーはありません。私はこれを引き起こしている可能性について何の手がかりも持っていません。

それはcodepenで動作:http://codepen.io/anon/pen/KzOKYM?editors=1111

SASS(コンパイルされていない)とJS:

$(window).scroll(function() { 
 
    youtubeVidScroll(); 
 
}); 
 

 

 
function youtubeVidScroll() { 
 

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

 
    $(".video-strip").css("background-position": "calc(50% - " + wScroll + "px) center"); 
 
}

// SASS 
 
.video-strip 
 
    width: 100% 
 
    height: 100% 
 
    position: absolute 
 
    background: 
 
    image: url(../images/video-strip.png) 
 
    repeat: repeat-x 
 
    size: 400% 
 
    background-position: calc(50% - 0px) center

https://github.com/DatScreamer/Screamer-Portfolio

EDIT:

この時点で私は私のファイルからすべてを削除し、唯一私がcodepenに持っているものを持って、まだそれはまだ動作しませんしています。私は今、それが私のjavascriptで問題ではないことを知っていますが、JSとブラウザをリンクする間のどこかにあります。私は単純なjqueryの事を入れて、それは動作しません。 (.hide())

答えて

0

問題は、_base.sassのhtml, bodyにあるoverflow: hiddenにありました。個人的な定型文であるためあまり使われていないファイルです。私は_base.sassにオーバーフロープロパティを追加することを覚えていませんでした。コメント欄でのヒントのための

おかげで、散在彼らは...

PSを取り除くところ。これは良い質問だと思います。なぜなら、JSの初心者は、オーバーフローがスクロールやその他の影響を防ぐことができないからです。

関連する問題