根据滚动位置淡入和淡出某些 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');}