1

私が抱えている基本的な問題は、ページ上のユーザーの現在の垂直位置に基づいて、特定の div をフェードインおよびフェードアウトしたいということです。ページの上部に戻ったときにフェードアウトするように、下にスクロールするときに最初の div をフェードインするのは簡単です。私は、それぞれの制限を確立するために、スクロールトップよりも大きいJavaScriptを使用する必要があると推測しています。

これまで私が使用してきたJavaScriptは次のとおりです。

if(scrollTop > 500) {
$("#Project-Desc, #Aqueous-Desc").fadeIn('slow');}
if(scrollTop < 500) {
$("#Project-Desc").fadeOut('slow');}

私がやろうとしていることを正確に確立するための私のサイトは次のとおりです。

http://luke-keller.com/test2/

フェードインする小さな灰色のボックスにプロジェクトの説明が含まれていることがわかります。ここで、スクロール位置などに基づいて古いコンテンツをフェードアウトし、新しいコンテンツをフェードインする必要があります。

ありがとう！

PS - 追加の HTML

<div id="Portfolio">

    <div id="Port-Position">

        <div id="Aqueous" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousPlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            </div>

            <div class="Project-Divider">
            </div>

            <div id="Townhouse" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/townhousePlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhouseModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhousePath.jpg" width="600" height="400" border="0" alt=""/>
            </div>

      </div>
   </div>

        <div id="Project-Desc">

            <div id="Aqueous-Desc" class="Desc">
                <h2>AQUEOUS</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

             <div id="Townhouse-Desc" class="Desc">
                <h2>TOWNHOUSE</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

</div>

注:プロジェクトの説明、つまりフェードインとフェードアウトを行うボックスは、違いが生じる場合、固定位置の要素です。

4

2 に答える 2

0

私は答えを持っていると思います。このコードに関して何か提案がある人なら誰でも歓迎しますが、基本的には、ウィンドウのスクロール位置を見つけ、特定のパラメーターに基づいてフェードインとフェードアウトを挿入する必要があります (位置が x より大きく y より小さく、 #mydiv でフェードインします)。以下にいくつかをコーディングしましたが、まだまだたくさんあります。

$(window).scroll(function(){
  // gets the position of the window
          var y = $(window).scrollTop();

            if( y < (600) ){
            $(".Desc").fadeOut('slow');}

          if( y > (600) && y < (1900) ){
            $("#Aqueous-Desc").fadeIn('slow');}
          if( y > (1900) ){
            $("#Aqueous-Desc").fadeOut('slow');}
          if( y < (600) ){
            $("#Aqueous-Desc").fadeOut('slow');}


            if( y > (2100) && y < (3300) ){
                $("#Townhouse-Desc").fadeIn('slow');}
            if( y > (3300) ){
                $("#Townhouse-Desc").fadeOut('slow');}
            if( y < (2100) ){
                $("#Townhouse-Desc").fadeOut('slow');}


            if( y > (3500) && y < (4700) ){
                $("#Poley-Desc").fadeIn('slow');}
            if( y > (4700) ){
                $("#Poley-Desc").fadeOut('slow');}
            if( y < (3500) ){
                $("#Poley-Desc").fadeOut('slow');}
于 2011-08-29T16:47:30.670 に答える