显示页眉和隐藏页脚慢下来

页眉和页脚应该以两种不同的方式显示和隐藏。当用户向下滚动时，标题淡出。当用户移动到该区域时，页脚淡入。当我到达顶部时，它很快又会弹出。淡入应该像淡入一样快。这种情况与页脚类似，一旦用户不再将鼠标移动到其上，页脚应该再次缓慢向下移动。有人能帮帮我吗?

// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}     
}

html,
body {
height: 100%;
margin: 0;
}
html,
body,
header,
footer {
width: 100%;
}
header,
footer {
height: 100px;
left: 0px;
margin: 0px;
color: beige;
z-index: 99999;
}

.header {
position: fixed;
background-color: black;
top: 0px;
transition: transform 250ms;
}
.sticky {
position: fixed;
top: -100px;
transition: top 0.8s ease;
}
footer {
position: fixed;
height: 200px;
bottom: -100px;
}
footer:hover {
bottom: 0px;
transition: bottom 0.8s ease;
}
footer div {
height: 100px;
}
.container {
background-color: grey;
height: 100%;
padding: 0px;
}
body {
position: relative;
margin: 0 auto;
}
.block1,
.block2,
.block3 {
min-height: 400px;
}
.block1 {
background-color: #FA4197;
}
.block2 {
background-color: #33D89D;
}
.block3 {
background-color: #FDC800;
}
.row {
height: auto;
margin: 0px;
left: 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<header id="myHeader" class="header">Text 1</header>
<div class="container">
<div class="row">
<div class="col 4 block1">Text 2</div>
<div class="col 4 block2">Text 3</div>
<div class="col 4 block3">Text 4</div>
</div>
<div class="row">
<div class="col 4 block2">Text 5</div>
<div class="col 4 block3">Text 6</div>
<div class="col 4 block1">Text 7</div>
</div>
<div class="row">
<div class="col 4 block3">Text 8</div>
<div class="col 4 block1">Text 9</div>
<div class="col 4 block2">Text 10</div>
</div>
</div>
<footer>
<div style="background: none"></div>
<div style="background-color: black">Text 11</div>
</footer>
</body>

也将0.8s ease添加到组件样式中。所以在.header中，用transition: top 0.8s ease;代替transition: transform 250ms;。如果你想让页脚的渐入和渐出效果相同，

// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}     
}

html,
body {
height: 100%;
margin: 0;
}
html,
body,
header,
footer {
width: 100%;
}
header,
footer {
height: 100px;
left: 0px;
margin: 0px;
color: beige;
z-index: 99999;
}

.header {
position: fixed;
background-color: black;
top: 0px;
transition: top 0.8s ease;
}
.sticky {
position: fixed;
top: -100px;
transition: top 0.8s ease;
}
footer {
position: fixed;
height: 200px;
bottom: -100px;
transition: bottom 0.8s ease;
}
footer:hover {
bottom: 0px;
transition: bottom 0.8s ease;
}
footer div {
height: 100px;
}
.container {
background-color: grey;
height: 100%;
padding: 0px;
}
body {
position: relative;
margin: 0 auto;
}
.block1,
.block2,
.block3 {
min-height: 400px;
}
.block1 {
background-color: #FA4197;
}
.block2 {
background-color: #33D89D;
}
.block3 {
background-color: #FDC800;
}
.row {
height: auto;
margin: 0px;
left: 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<header id="myHeader" class="header">Text 1</header>
<div class="container">
<div class="row">
<div class="col 4 block1">Text 2</div>
<div class="col 4 block2">Text 3</div>
<div class="col 4 block3">Text 4</div>
</div>
<div class="row">
<div class="col 4 block2">Text 5</div>
<div class="col 4 block3">Text 6</div>
<div class="col 4 block1">Text 7</div>
</div>
<div class="row">
<div class="col 4 block3">Text 8</div>
<div class="col 4 block1">Text 9</div>
<div class="col 4 block2">Text 10</div>
</div>
</div>
<footer>
<div style="background: none"></div>
<div style="background-color: black">Text 11</div>
</footer>
</body>

相关内容

最新更新

热门标签：