现在我有两个无法修复的代码问题：
1( 在jsfiddle中，项目在向下滚动时会淡入，但当我尝试使用sublime(或notepad++(时，淡入仅在刷新页面和向上滚动时有效。
2( 对于淡出，我试图将这一部分添加到代码中，但不起作用。更糟糕的是，它实际上打破了第一个淡入(这个问题发生在jsfiddle和本地(
//check if this current container is within view
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$(this).animate({'opacity':'1'},500);
} else {
$(this).animate({'opacity':'0'},500);
}
jsfiddle：https://jsfiddle.net/ja5nz1ux/
(目前我正在html中做所有事情(
代码：
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
.timeline {
--uiTimelineMainColor: var(--timelineMainColor, #008080);
--uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
position: relative;
padding-top: 3rem;
padding-bottom: 3rem;
}
.timeline:before {
content: "";
width: 4px;
height: 100%;
/* Color line */
background-color: #2e4053;
position: absolute;
top: 0;
}
.timeline__group {
position: relative;
opacity: 1;
}
.timeline__group:not(:first-of-type) {
margin-top: 4rem;
}
.timeline__year {
padding: .5rem 1.5rem;
color: var(--uiTimelineSecondaryColor);
background-color: var(--uiTimelineMainColor);
position: absolute;
left: 0;
top: 0;
}
.timeline__box {
position: relative;
opacity: 0;
}
.timeline__box:not(:last-of-type) {
margin-bottom: 30px;
}
.timeline__box:before {
content: "";
width: 100%;
height: 2px;
/* color line middle */
background-color: #c39bd3;
position: absolute;
left: 0;
z-index: -1;
}
.timeline__date {
min-width: 65px;
position: absolute;
left: 0;
box-sizing: border-box;
padding: .5rem 1.5rem;
text-align: center;
/* color box */
background-color: #008080;
color: var(--uiTimelineSecondaryColor);
}
.timeline__day {
font-size: 2rem;
font-weight: 700;
display: block;
}
.timeline__month {
display: block;
font-size: .8em;
text-transform: uppercase;
}
.timeline__post {
padding: 1.5rem 2rem;
border-radius: 2px;
/* color box text */
border-left: 3px solid #c39bd3;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
background-color: var(--uiTimelineSecondaryColor);
}
@media screen and (min-width: 641px) {
.timeline:before {
left: 30px;
}
.timeline__group {
padding-top: 55px;
opacity: 1;
}
.timeline__box {
padding-left: 80px;
}
.timeline__box:before {
top: 50%;
transform: translateY(-50%);
}
.timeline__date {
top: 50%;
margin-top: -27px;
}
}
@media screen and (max-width: 640px) {
.timeline:before {
left: 0;
}
.timeline__group {
padding-top: 40px;
opacity: 1;
}
.timeline__box {
padding-left: 20px;
padding-top: 70px;
}
.timeline__box:before {
top: 90px;
}
.timeline__date {
top: 0;
}
}
.timeline {
--timelineMainColor: #4557bb;
font-size: 16px;
}
/*
=====
DEMO
=====
*/
@media (min-width: 768px) {
html {
font-size: 62.5%;
}
}
@media (max-width: 767px) {
html {
font-size: 55%;
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
color: # #008080;
background-color: #f0f0f0;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
p {
margin-top: 0;
margin-bottom: 1.5rem;
line-height: 1.5;
}
p:last-child {
margin-bottom: 0;
}
.page {
max-width: 800px;
padding: 10rem 2rem 3rem;
margin-left: auto;
margin-right: auto;
order: 1;
}
</style>
</HEAD>
<BODY>
<div class="page">
<div class="timeline">
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">1</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 1 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">2</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 2 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">3</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 3 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">4</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 4 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">5</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 5 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">6</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 6 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">7</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 7 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">8</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 8 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">9</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 9 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">10</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 10 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">11</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 11 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">12</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 12 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">13</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 13 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">14</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 14 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">15</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 15 </p>
</div>
</div>
</div>
</div>
<div class="timeline__group">
<div class="timeline__box">
<div class="timeline__date">
<span class="timeline__month">Day</span>
<span class="timeline__day">16</span>
</div>
<div class="timeline__post">
<div class="timeline__content">
<p> test 16 </p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $animation_elements = $('.timeline__box');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$(this).animate({
'opacity': '1'
}, 500);
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>
</BODY>
</HTML>在你不写之前，这不会在sublime、notepad++或任何其他在浏览器中打开输出的IDE上工作(而不是在像Jsfidle这样的框架式在线平台中(
<!DOCTYPE html>
因为如果没有这个，您的$window.height((将无法正常工作
var window_height = $window.height();
这将为您提供整个可滚动内容的值。
此外，当您滚动时，所有具有类timeline__box的元素的不透明度都将变为1
如图所示
//check if this current container is within view
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$(this).animate({'opacity':'1'},500);
} else {
$(this).animate({'opacity':'0'},500);
}
如果你稍微滚动一点，check_If_in_view((函数会多次调用，并且当你添加500毫秒的延迟时，它将在很长一段时间内保持1的不透明度。如果您在元素下方应用代码，就会很容易理解闪烁。因此，不起作用
//check if this current container is within view
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$(this).animate({'opacity':'1'},500);
$(this).animate({'opacity':'0'},500);
}
我希望你能理解