为什么，在滚动元素中使用offset（）。top和scrollTop（）是我的尺寸没有按预期返回？

时间：2017-01-09 18:54:38

标签： javascript jquery css scroll offset

我正在http://101drums.com/test开发一个网络应用，并希望在进入和离开滚动父元素的可见部分时淡入淡出元素。 myfunkyside在这个问题Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window中得到了答案的帮助，并在此https://jsfiddle.net/tciprop/u4vaodvL/修改了此代码。 但是，偏移顶部的元素返回太大和/或滚动div的可见部分返回到低，以便淡入渐变到可见区域。有任何想法吗？ 这是我的小提琴https://jsfiddle.net/tciprop/u4vaodvL/。

HTML 

<div class="header"></div>
<div class="menu">
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
</div>

CSS 

body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.header {
  height: 40px;
}
.fade {
  position: relative;
  margin: 10px 5px 10px 5px;
  padding: 10px 5px 10px 5px;
  background-color: lightgreen;
  opacity: 1;
  height: 50px;
}
.menu {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 2vw 3vh;
    width: 90vw;
  height: 80vh;
  margin: auto;
}

JS 

$(window).on("load",function() {
  $(".menu").scroll(function() {
    $(".fade").each(function() {
        //find relative positions
        var objectTop = $(this).offset().top;
        var objectBottom = objectTop + $(this).outerHeight();
        var windowTop = $(".menu").scrollTop();
        var windowBottom = windowTop + $(".menu").innerHeight();

      if (objectTop < windowTop) {//fade out on leaving top of scrollable area
            if ($(this).css("opacity")==1) {
                    $(this).fadeTo(500,0);
            }
      } else if (objectBottom < windowBottom && objectTop > windowTop) {//fade in on entering top of scrollable area
            if ($(this).css("opacity")==0) {
                    $(this).fadeTo(500,1);
          }
      } else if (objectBottom < windowBottom) {//fade in on entering bottom of scrollable area
            if ($(this).css("opacity")==0) {
                    $(this).fadeTo(500,1);
          }
      } else {
            if ($(this).css("opacity")==1) {//fade out on leaving bottom of scrollable area
                    $(this).fadeTo(500,0);
            }
      }
     console.log(objectTop, objectBottom, windowTop, windowBottom);
    });
  }); $(".menu").scroll(); //invoke scroll-handler on page-load
});

2 个答案:

答案 0 :(得分：1)

修改代码的这些部分

var windowTop = $(".menu").scrollTop();
var windowBottom = windowTop + $(".menu").innerHeight();

使用window代替.menu 

var windowTop = $(window).scrollTop();
var windowBottom = windowTop + $(window).innerHeight();


$(window).on("load", function() {
  $(".menu").scroll(function() {
    $(".fade").each(function() {
      //find relative positions
      var objectTop = $(this).offset().top;
      var objectBottom = objectTop + $(this).outerHeight();
      var windowTop = $(window).scrollTop();
      var windowBottom = windowTop + $(window).innerHeight();

      if (objectTop < windowTop) { //fade out on leaving top of scrollable area
        if ($(this).css("opacity") == 1) {
          $(this).fadeTo(500, 0);
        }
      } else if (objectBottom < windowBottom && objectTop > windowTop) { //fade in on entering top of scrollable area
        if ($(this).css("opacity") == 0) {
          $(this).fadeTo(500, 1);
        }
      } else if (objectBottom < windowBottom) { //fade in on entering bottom of scrollable area
        if ($(this).css("opacity") == 0) {
          $(this).fadeTo(500, 1);
        }
      } else {
        if ($(this).css("opacity") == 1) { //fade out on leaving bottom of scrollable area
          $(this).fadeTo(500, 0);
        }
      }
      console.log(objectTop, objectBottom, windowTop, windowBottom);
    });
  });
  $(".menu").scroll(); //invoke scroll-handler on page-load
});
body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.header {
  height: 40px;
}
.fade {
  position: relative;
  margin: 10px 5px 10px 5px;
  padding: 10px 5px 10px 5px;
  background-color: lightgreen;
  opacity: 1;
  height: 50px;
}
.menu {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 2vw 3vh;
  width: 90vw;
  height: 80vh;
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="menu">
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
</div>

答案 1 :(得分：1)

使用.position().top代替offset().top （我也做了一些其他更改，请参阅要点）：

$(window).on("load",function() {
    $(".menu").scroll(function() {
        var parentBottom = $(this).innerHeight();
        $(".fade").each(function() {
            var objectTop = $(this).position().top;
            var objectBottom = objectTop + $(this).outerHeight();

            if (0 <= objectTop&&objectBottom < parentBottom) { //fade in when object is completely within view
                if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
            } else { //fade out when object goes out of view (either top or bottom)
                if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
            }
        });
    }).scroll(); //invoke scroll-handler on page-load
});


$(window).on("load",function() {
  $(".menu").scroll(function() {
    var parentBottom = $(this).innerHeight();
    $(".fade").each(function() {
      var objectTop = $(this).position().top;
      var objectBottom = objectTop + $(this).outerHeight();
      
      if (0 <= objectTop&&objectBottom < parentBottom) { //fade in when object is completely within view
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //fade out when object goes out of view (either top or bottom)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});
body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.header {
  height: 40px;
  border: 2px solid red;
}
.menu {
  position: relative;
  width: 90vw;
  height: 80vh;
  margin: auto;
  border: 1px solid blue;
  border-width: 2vw 3vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.fade {
  position: relative;
  height: 50px;
  margin: 10px 5px;
  padding: 10px 5px;
  background-color: lightgreen;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="header"></div>
<div class="menu">
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
  <div class="fade">Fade In 11</div>
  <div class="fade">Fade In 12</div>
  <div class="fade">Fade In 13</div>
  <div class="fade">Fade In 14</div>
  <div class="fade">Fade In 15</div>
  <div class="fade">Fade In 16</div>
  <div class="fade">Fade In 17</div>
  <div class="fade">Fade In 18</div>
  <div class="fade">Fade In 19</div>
  <div class="fade">Fade In 20</div>
</div>
jsfiddle：https://jsfiddle.net/2bc5ueLc/3/

    我不再需要
  • .scrollTop，我将其更改为0。
  • 我将parentBottom（ windowBottom ）移出.each，因为该值不会更改，因此只需存储一次。
  • 我简化了你的if子句。

更新

如果您想根据可见百分比淡化元素，请使用以下代码： 

$(window).on("load",function() {
    $(".menu").scroll(function() {
        var parentBottom = $(this).innerHeight();
        $(".fade").each(function() {
            var objectHeight = $(this).outerHeight();
            var objectTop = $(this).position().top;
            var objectBottom = objectTop + objectHeight;

            //fade in/out based on visible percentage of element
            if (objectTop < 0) {
                if (objectBottom > 0) {$(this).fadeTo(0,objectBottom/objectHeight);}
                else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
            } else if (objectBottom > parentBottom) {
                if (objectTop < parentBottom) {$(this).fadeTo(0,(parentBottom-objectTop)/objectHeight);}
                else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
            } else if ($(this).css("opacity")!=1) {$(this).fadeTo(0,1);}
        });
    }).scroll(); //invoke scroll-handler on page-load
});


$(window).on("load",function() {
  $(".menu").scroll(function() {
    var parentBottom = $(this).innerHeight();
    $(".fade").each(function() {
      var objectHeight = $(this).outerHeight();
      var objectTop = $(this).position().top;
      var objectBottom = objectTop + objectHeight;
      
      //fade in/out based on visible percentage of element
      if (objectTop < 0) {
        if (objectBottom > 0) {$(this).fadeTo(0,objectBottom/objectHeight);}
        else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
      } else if (objectBottom > parentBottom) {
        if (objectTop < parentBottom) {$(this).fadeTo(0,(parentBottom-objectTop)/objectHeight);}
        else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
      } else if ($(this).css("opacity")!=1) {$(this).fadeTo(0,1);}
    });
  }).scroll(); //invoke scroll-handler on page-load
});
body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.header {
  height: 40px;
  border: 2px solid red;
}
.menu {
  position: relative;
  width: 90vw;
  height: 80vh;
  margin: auto;
  border: 1px solid blue;
  border-width: 2vw 3vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.fade {
  position: relative;
  height: 50px;
  margin: 10px 5px;
  padding: 10px 5px;
  background-color: lightgreen;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="header"></div>
<div class="menu">
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
  <div class="fade">Fade In 11</div>
  <div class="fade">Fade In 12</div>
  <div class="fade">Fade In 13</div>
  <div class="fade">Fade In 14</div>
  <div class="fade">Fade In 15</div>
  <div class="fade">Fade In 16</div>
  <div class="fade">Fade In 17</div>
  <div class="fade">Fade In 18</div>
  <div class="fade">Fade In 19</div>
  <div class="fade">Fade In 20</div>
</div>
jsfiddle：https://jsfiddle.net/2bc5ueLc/6/

相关问题
最新问题