免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
エフェクト説明:
非常に目に見えるへページのスクロール量、
クラス名を上げるタグで「トップの固定には、」スタイルヘッダを制御します。
$(window).on('scroll',()=>{
let $fixedheader = $('header'); // fixed容器
// console.log(fixedheader);
var wintop=$(window).scrollTop(); // 已滚动卷去的高度
// console.log(wintop);
let winHeight = $(window).height(); // 可视窗口的高度
// console.log(winHeight);
// 卷去一个可视窗口高度后执行
if (wintop - winHeight > 0) {
// fixedheader.hide();
$fixedheader.addClass("top-fixed");
} else {
// fixedheader.show();
$fixedheader.removeClass("top-fixed");
}
})
/* 固定顶部 */
header{
height:114px;
}
.top-fixed{
position:fixed;
animation:mymove .5s forwards;
z-index:10;
}
@keyframes mymove{
from {
top:-114px;
}
to {
top:0px;
}
}