在WayPoint中，是否有办法说出实际网站顶部与浏览器窗口当前顶部之间的偏移量? [英] Is there a way to in WayPoints to say offset from actual website top vs the current top of the browser window?
本文介绍了在WayPoint中，是否有办法说出实际网站顶部与浏览器窗口当前顶部之间的偏移量?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个以基本SVG动画开头的徽标.当用户向下滚动时，它会触发另一个动画，该动画将徽标向侧面推并显示徽标的一部分.当您向上滚动时，徽标会滑回到视图中.
I have a logo that starts in with a basic SVG animation. When a user scrolls down it fires off another animation that pushes the logo sideways and shows part of the logo. When you scroll back up, the logo slides back into view.
这一切都很好！
问题 如果我重新加载页面的一半，或者将鼠标悬停在链接上(这很奇怪)，动画将重新启动，因此徽标可见并且覆盖了内容.这显然不是期望的效果.
The Issue If I reload the page half way down, or (which is odd) hover on a link, the animation restarts so the logo is visible and covering content. This is obviously not the desired effect.
问题 我可以说有什么办法可以使页面的顶部相对于浏览器的顶部偏移20％，以便动画不会重新触发，直到它与实际顶部不相距20％时才做任何事情?
The Question Is there any way I can say offset 20% FROM THE TOP of the page vs the top of the browser so the animation will not re-fire until or do anything until if it's not 20% from the actual top?
您可以看到徽标的运行节奏(和错误) https://stable.stable-demos.com/our-work/
如何复制 加载页面，向下滚动一半，重新加载页面.您将看到完整的徽标，只有当用户再次滚动时，徽标才可以再次隐藏(因为它测量的是浏览器窗口的偏移量还是页面顶部的偏移量).
How to Reproduce Load page, scroll down half way, reload page. You will see full logo which can only be hidden again if the users scrolls again (because it's measuring browser window offset vs top of page offset).
Jeeez，我希望这是有道理的.谢谢大家的投入！
Jeez I hope that makes sense. Thanks all for your input!
jQuery(document).ready(function($) {
// Smooth OUT
$('#smooth-logo').waypoint(function(direction) {
if (direction === 'down') {
$('.fadeMe').addClass('blur-in-fwd');
$('.fadeMe').removeClass('blur-in-bkw');
$('#smooth-logo').addClass('slideLeft');
$('#smooth-logo').removeClass('slideRight');
$('#animOut').get(0).beginElement(); // restart the animation
} else if (direction === 'up') {
$('.fadeMe').addClass('blur-in-bkw');
$('.fadeMe').removeClass('blur-in-fwd slide-right');
$('#smooth-logo').addClass('slideRight');
$('#smooth-logo').removeClass('slideLeft');
$('#animIn').get(0).beginElement(); // restart the animation
}
},
{ offset: '0%' });
});
.header {
min-height: 2000px;
position: relative;
}
#smooth-logo {
position: fixed;
}
/* PRIMARY LOAD ANIMATION */
.dropInAll {
animation: drop 0.5s alternate;
opacity: 0;
animation-fill-mode:forwards;
}
.dropIn1 {
animation-delay: 0.4s;
}
.dropIn2 {
animation-delay: 0.5s;
}
.dropIn3 {
animation-delay: 0.6s;
}
/* Slide Letters */
.slideAll {
position: relative;
animation: slideThis 5s alternate;
animation-duration: 0.5s;
opacity: 0;
animation-fill-mode:forwards;
}
@keyframes slideThis {
0% {opacity: 0.2;-webkit-transform: translateX(200px);}
100% {opacity: 1;-webkit-transform: translateX(0px);}
}
/* S */
.bigS {
animation-delay: 0.5s;
}
/* T */
.bigS1 {
animation-delay: 0.6s;
}
/* A */
.bigS2 {
animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
animation-delay: 1.2s;
}
@keyframes drop {
0% {opacity: 0.2;transform: translateY(-100px);}
100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {
0% { opacity: 1; fill: black; }
20% { opacity: 1; fill: black; }
50% { opacity: 1; fill: maroon; }
100% { opacity: 1; fill: black; }
}
.bigS3 {
animation-delay: 0.9s;
}
/* B */
.bigS4 {
animation-delay: 1s;
}
/* L */
.bigS5 {
animation-delay: 1.1s;
}
/* E */
.bigS6 {
animation-delay: 1.2s;
}
/* SCROLLING ANIMATIONS */
.blur-in-fwd {
filter: url(#filt-blur-out);
}
.blur-in-bkw {
filter: url(#filt-blur-in);
}
/* Slide Animations */
.slideLeft {
-webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.8s;
}
#filt-blur-in {
animation-delay: 2s!important;
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
}
.slideRight {
-webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
@keyframes text-blur-in {
0% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
100% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="../custom.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">
<header class="header">
<div id="smooth-logo">
<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- small the -->
<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>
<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>
<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>
<!-- BIG S -->
<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
<!-- Big S Blur Animation -->
<defs>
<!-- BLUR IN -->
<filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
<animate id="animOut"
attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feGaussianBlur>
<feFlood flood-color="white" flood-opacity="1" result="alphapart">
<animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feFlood>
<feComposite in="blurpart" in2="alphapart" operator="in"/>
</filter>
<!-- BLUR OUT -->
<filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
<animate id="animIn"
attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
</feGaussianBlur>
<feFlood flood-color="white" flood-opacity="0" result="alphapart">
<animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feFlood>
<feComposite in="blurpart" in2="alphapart" operator="in"/>
</filter>
</defs>
<!-- BIG T -->
<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>
<!-- ICON UPPER -->
<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>
<!-- ICON LOWER -->
<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>
<!-- BIG B -->
<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>
<!-- BIG L -->
<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>
<!-- BIG E -->
<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
</svg>
</div>
</header>
我尝试过此更新代码 但是它只是自动触发，而不是在上下文中指定ID的DIV处触发:
I Tried This Update Code But it just automatically triggers instead of at the DIV with the ID specified in context:
jQuery(document).ready(function($) {
$("#smooth-logo").waypoint(function(direction) {
var $target = $( '#targetPoint' );
if (direction === 'down' && $target ){
$(".fadeMe").addClass("blur-in-fwd");
$(".fadeMe").removeClass("blur-in-bkw");
$("#smooth-logo").addClass("slideLeft");
$("#smooth-logo").removeClass("slideRight");
$("#animOut").get(0).beginElement(); // restart the animation
} else if (direction === 'up') {
$(".fadeMe").addClass("blur-in-bkw");
$(".fadeMe").removeClass("blur-in-fwd slide-right");
$("#smooth-logo").addClass("slideRight");
$("#smooth-logo").removeClass("slideLeft");
$("#animIn").get(0).beginElement(); // restart the animation
}
},
{ offset: '0%', context: 'body' });
});
我在此URL处有一个示例: https://stable.stable-demos.com/quip/
I have an example here at this URL: https://stable.stable-demos.com/quip/
推荐答案
下面的工作片段是您想要的吗?基本上，您不需要指定#smooth-logo航路点，因为它是动画的一部分，而徽标本身在滚动页面时始终保持固定在同一位置，您只需要指定目标点和目标点即可达到它，动画将运行(我已经放置了console.log()来通知何时达到目标):
Working snippet below, is that what you want? Basically you don't need to specify the #smooth-logo waypoint as it is part of your animation and the logo itself which always remains fixed at the same position whenever you scroll the page, all you need to specify is the target point and when it reaches it the animation will run (i've put a console.log() to notify when the target is reached):
$(function() {
$('#targetPoint').waypoint(function(direction) {
console.log('waypoint reached!');
// Target this element and run the up or down animation respectively
if (direction === 'down') {
$(".fadeMe").addClass("blur-in-fwd");
$(".fadeMe").removeClass("blur-in-bkw");
$("#smooth-logo").addClass("slideLeft");
$("#smooth-logo").removeClass("slideRight");
$("#animOut").get(0).beginElement(); // restart the animation
} else if (direction === 'up') {
$(".fadeMe").addClass("blur-in-bkw");
$(".fadeMe").removeClass("blur-in-fwd slide-right");
$("#smooth-logo").addClass("slideRight");
$("#smooth-logo").removeClass("slideLeft");
$("#animIn").get(0).beginElement(); // restart the animation
}
},
{ offset: "0%" })
});
.header {
min-height: 2000px;
position: relative;
}
#smooth-logo {
position: fixed;
}
/* PRIMARY LOAD ANIMATION */
.dropInAll {
animation: drop 0.5s alternate;
opacity: 0;
animation-fill-mode:forwards;
}
.dropIn1 {
animation-delay: 0.4s;
}
.dropIn2 {
animation-delay: 0.5s;
}
.dropIn3 {
animation-delay: 0.6s;
}
/* Slide Letters */
.slideAll {
position: relative;
animation: slideThis 5s alternate;
animation-duration: 0.5s;
opacity: 0;
animation-fill-mode:forwards;
}
@keyframes slideThis {
0% {opacity: 0.2;-webkit-transform: translateX(200px);}
100% {opacity: 1;-webkit-transform: translateX(0px);}
}
/* S */
.bigS {
animation-delay: 0.5s;
}
/* T */
.bigS1 {
animation-delay: 0.6s;
}
/* A */
.bigS2 {
animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
animation-delay: 1.2s;
}
@keyframes drop {
0% {opacity: 0.2;transform: translateY(-100px);}
100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {
0% { opacity: 1; fill: black; }
20% { opacity: 1; fill: black; }
50% { opacity: 1; fill: maroon; }
100% { opacity: 1; fill: black; }
}
.bigS3 {
animation-delay: 0.9s;
}
/* B */
.bigS4 {
animation-delay: 1s;
}
/* L */
.bigS5 {
animation-delay: 1.1s;
}
/* E */
.bigS6 {
animation-delay: 1.2s;
}
/* SCROLLING ANIMATIONS */
.blur-in-fwd {
filter: url(#filt-blur-out);
}
.blur-in-bkw {
filter: url(#filt-blur-in);
}
/* Slide Animations */
.slideLeft {
-webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.8s;
}
#filt-blur-in {
animation-delay: 2s!important;
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
}
.slideRight {
-webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
@keyframes text-blur-in {
0% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
100% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">
<header class="header">
<div id="smooth-logo">
<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- small the -->
<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>
<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>
<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>
<!-- BIG S -->
<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
<!-- Big S Blur Animation -->
<defs>
<!-- BLUR IN -->
<filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
<animate id="animOut"
attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feGaussianBlur>
<feFlood flood-color="white" flood-opacity="1" result="alphapart">
<animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feFlood>
<feComposite in="blurpart" in2="alphapart" operator="in"/>
</filter>
<!-- BLUR OUT -->
<filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
<animate id="animIn"
attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
</feGaussianBlur>
<feFlood flood-color="white" flood-opacity="0" result="alphapart">
<animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
</feFlood>
<feComposite in="blurpart" in2="alphapart" operator="in"/>
</filter>
</defs>
<!-- BIG T -->
<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>
<!-- ICON UPPER -->
<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>
<!-- ICON LOWER -->
<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>
<!-- BIG B -->
<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>
<!-- BIG L -->
<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>
<!-- BIG E -->
<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
</svg>
</div>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
这篇关于在WayPoint中，是否有办法说出实际网站顶部与浏览器窗口当前顶部之间的偏移量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
