1

我遇到的基本问题是我想根据用户当前在页面上的垂直位置淡入和淡出特定的 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>

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

4

2 回答 2

1

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

就像是

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

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

于 2013-05-06T17:18:37.327 回答
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 回答