根据滚动位置淡入和淡出某些 DIV

Question

我遇到的基本问题是我想根据用户当前在页面上的垂直位置淡入和淡出特定的 div。向下滚动时让第一个 div 淡入很容易，当我回到页面顶部时让它淡出也是如此。我猜我需要使用大于、小于 scrollTop 的 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>

注意：项目描述，即我要淡入和淡出的框，是一个固定位置元素，如果这有什么不同的话。

Answer 1

这很有帮助。我做了一些修改，有助于在用户快速滚动时缓和元素之间的过渡。

类似

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

这会将不透明度内容绑定到 if 语句中设置的范围，因此如果您超出范围，它将淡出。

Answer 2

我想我有答案。我欢迎任何对这段代码有任何建议的人，但本质上你需要找到窗口的滚动位置，并根据某些参数插入淡入淡出（位置大于 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');}