gpt4 book ai didi

javascript - 如何在页面顶部添加Class

转载 作者:太空宇宙 更新时间:2023-11-04 06:41:56 24 4
gpt4 key购买 nike

我无法弄清楚如何在页面顶部添加 addClass 而无需滚动。换句话说,当您第一次登陆页面时,动画应该从 addClass 开始。

一旦您开始向下滚动页面,我的代码就可以工作;即使在 addClass 启动后点击滚动条也是如此。

但是当您位于页面顶部并且没有向下滚动时,什么也没有。

HTML:

<div class="row"> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

CSS:

@-webkit-keyframes fadeInUp {  0% { opacity: 0; -webkit-transform: translateY(20px); }  100% { opacity: 1; -webkit-transform: translateY(0); }  } 
@-moz-keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }


.row.animate {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: 0.03s;
}

JavaScript

(function($) {

$.fn.visible = function (partial) {

var $t = $(this),
$w = $(window),
offset = 0,
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);


// Already visible modules
$(".row").each(function(i, el) {
var el = $(el);
el.css("opacity","0");
if (el.visible(true)) {
setTimeout(function(){el.addClass("animate","50");},50 + ( i * 50 ));
}
});

$(window).scroll(function(event) {

$(".row").each(function(i, el){
var el = $(el);
el.css("opacity","0");
if (el.visible(true)){
setTimeout(function(){el.addClass("animate","50");},50 + ( i * 50 ));
}



});


});

最佳答案

所以这意味着您需要初始化滚动处理程序中的代码。所以你可以将它分解成一个函数并调用它

function scrolled (event) {
...
}
$(window).scroll(scrolled);
scrolled();

或者你可以触发滚动事件,这样里面的代码就会运行。

$(window).scroll(function(event) { 
...
}).trigger("scroll");

这样做你不需要复制任何代码。

下面,代码在加载和滚动时淡入。

(function($) {

$.fn.visible = function(partial) {

var $t = $(this),
$w = $(window),
offset = 0,
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);


$(window).scroll(function(event) {
$(".row").each(function(i, el) {
var el = $(el);
el.css("opacity", "0");
console.log(el[0], el.visible(true))
if (el.visible(true)) {
setTimeout(function() {
el.addClass("animate", "50");
}, 50 + (i * 50));
}
})
}).trigger("scroll");
div {
width: 50%; /* so it scrolls on the page */
}

@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@-o-keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.row.animate {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: 0.03s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

我会更新 CSS,使不透明度默认为零,而不用 JavaScript 代码设置它。我会确保您使用 document.ready 运行它,以确保内容已完全加载。

关于javascript - 如何在页面顶部添加Class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53674888/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com