0

OK、私の問題は、クライアント用のパララックス Web サイトがあり、パララックス サイトをスクロールダウンしたときに製品の説明がフェードインすることを望んでいることです。私が抱えている問題は、サイトが事実上 1 つの長いページであり、スクリプトが混乱し、ページが読み込まれるときに "opacity:0" から div が消えてしまうことです。何が起こっているのかを理解するために div に長いフェードインを設定し、それをテストするために適切な書式を設定せずにごみ箱を作成しました。何が起こっているかを示すために、サイトの一時的なコピーをアップロードしました (私はオフラインで作業しています)。

http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!画像

皆様お世話になりました！！！:-)

CSS

/* Hide any element */
.hideme               {
Opacity:0;
}

HTML

<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>

脚本

<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){    
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
4

1 に答える 1

0

ウィンドウの下部を確認するには、.scrollTop を使用する代わりに、window.pageYOffset を試してください。

さらに、あなたは JS を酷使していると思います - ユーザーがスクロールするたびに位置を計算しないように、.scroll() 関数の外で bottom_of_object を計算しようとします。

そして、単純なフェードイン/アウトの場合は、display:none, .fadeIn() を実行します。

于 2013-07-30T16:08:41.617 に答える