目标:
当你向上滚动的时候,要从看不见的过渡到明显的转变。
问题:
我已经检索到一些信息,它不可能是由于语法‘显示’。是否有另一种解决办法来实现这一目标?
Jsbin:
https://jsbin.com/nafarabimi/edit?css,js,output
谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="testtest">
<img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
<div id="content" class="palette-2">
content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> c
</html>body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
@media only screen and (min-width: 1000px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "left-header header right-header" "left-content content right-content" "left-footer footer right-footer";
row-gap: 1rem;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
background-color: #8cffa0;
}
#top-content {
overflow: hidden;
position: fixed;
width: 100%;
height: 50px; /* changed this from 50 to bigger height */
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
}
#content {
margin-top: 50px;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}
@media only screen and (max-width: 999px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "header" "content" "footer";
row-gap: 1rem;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}window.onscroll = function() {
scrollFunction();
};
// get initial pageYOffset value
let originOffset = window.pageYOffset;
function scrollFunction() {
// current pageYOffset value
const curOffset = window.pageYOffset;
if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
// down
document.getElementById('top-content').style.display = 'none';
document.getElementById("top-content").style.marginTop = "-50px";
} else {
// up
document.getElementById('top-content').style.display = 'flex'; // change this to flex
document.getElementById('top-content').style.transition = 'all 0.5s ease'; // change this to flex
document.getElementById("top-content").style.marginTop = "0";
}
// change originOffset value every time
originOffset = window.pageYOffset;
}发布于 2022-09-25 15:13:31
不,您不能与display:none转换,因为您不能从一无所有过渡到某些东西。因此,我使用了Top-content的高度,最初将其设置为0,并在滚动页上添加50 on,因为高度可以转换。
我还去掉了document.getElementById("top-content").style.marginTop = "-50px";你真的不需要这么做。
注*@media only screen and (min-width: 300px)我将其更改为300,这样我们就可以看到代码片段在默认情况下是小的。
window.onscroll = function() {
scrollFunction();
};
// get initial pageYOffset value
let originOffset = window.pageYOffset;
function scrollFunction() {
// current pageYOffset value
const curOffset = window.pageYOffset;
if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
// down
document.getElementById('top-content').style.height = '0';
} else {
// up
document.getElementById('top-content').style.height = '50px'; // change this to flex
document.getElementById('top-content').style.transition = 'all 0.5s ease'; // change this to flex
}
// change originOffset value every time
originOffset = window.pageYOffset;
}body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
@media only screen and (min-width: 300px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "left-header header right-header" "left-content content right-content" "left-footer footer right-footer";
row-gap: 1rem;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
background-color: #8cffa0;
}
#top-content {
overflow: hidden;
position: fixed;
width: 100%;
height: 50px;
/* changed this from 50 to bigger height */
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
}
#content {
margin-top: 50px;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}
@media only screen and (max-width: 999px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "header" "content" "footer";
row-gap: 1rem;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="testtest">
<img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
<div id="content" class="palette-2">
content1
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> c
</div>
发布于 2022-09-25 15:08:29
显示:无不支持转换到另一种类型。
使用不透明度: 0,它可以转换为不透明: 1
发布于 2022-09-25 14:57:52
window.onscroll = function() {
scrollFunction();
};
// get initial pageYOffset value
let originOffset = window.pageYOffset;
function scrollFunction() {
// current pageYOffset value
const curOffset = window.pageYOffset;
if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
// down
document.getElementById('top-content2').style.display = 'none';
document.getElementById("top-content").style.marginTop = "-50px";
document.getElementById("top-content").classList.add("is-scrollingUp");
} else {
// up
document.getElementById('top-content2').style.display = 'flex'; // change this to flex
document.getElementById('top-content').style.transition = 'all 0.5s ease'; // change this to flex
document.getElementById("top-content").style.marginTop = "0";
document.getElementById("top-content").classList.remove("is-scrollingUp");
}
// change originOffset value every time
originOffset = window.pageYOffset;
}body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
.is-scrollingUp {
-webkit-transition: border-bottom-color .2s ease,-webkit-transform .2s ease;
transition: border-bottom-color .2s ease,-webkit-transform .2s ease;
-o-transition: transform .2s ease,border-bottom-color .2s ease;
transition: transform .2s ease,border-bottom-color .2s ease;
transition: transform .2s ease,border-bottom-color .2s ease,-webkit-transform .2s ease
}
@media only screen and (min-width: 1000px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "left-header header right-header" "left-content content right-content" "left-footer footer right-footer";
row-gap: 1rem;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
background-color: #8cffa0;
}
#top-content {
overflow: hidden;
position: fixed;
width: 100%;
grid-area: header;
align-items: center;
justify-content: center;
}
#top-content2 {
height: 50px; /* changed this from 50 to bigger height */
display: flex;
align-items: center;
justify-content: center;
}
#content {
margin-top: 50px;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}
@media only screen and (max-width: 999px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "header" "content" "footer";
row-gap: 1rem;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="top-content2">
<div id="testtest">
<img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
</div>
<div id="content" class="palette-2">
content0
<br /> content1
<br /> content2
<br /> content3
<br /> content4
<br /> content5
<br /> content6
<br /> content7
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> c
</html>
https://jsbin.com/mimiqebici/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="top-content2">
<div id="testtest">
<img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
</div>
<div id="content" class="palette-2">
content0
<br /> content1
<br /> content2
<br /> content3
<br /> content4
<br /> content5
<br /> content6
<br /> content7
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> c
</html>body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
.is-scrollingUp {
-webkit-transition: border-bottom-color .2s ease,-webkit-transform .2s ease;
transition: border-bottom-color .2s ease,-webkit-transform .2s ease;
-o-transition: transform .2s ease,border-bottom-color .2s ease;
transition: transform .2s ease,border-bottom-color .2s ease;
transition: transform .2s ease,border-bottom-color .2s ease,-webkit-transform .2s ease
}
@media only screen and (min-width: 1000px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "left-header header right-header" "left-content content right-content" "left-footer footer right-footer";
row-gap: 1rem;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
background-color: #8cffa0;
}
#top-content {
overflow: hidden;
position: fixed;
width: 100%;
grid-area: header;
align-items: center;
justify-content: center;
}
#top-content2 {
height: 50px; /* changed this from 50 to bigger height */
display: flex;
align-items: center;
justify-content: center;
}
#content {
margin-top: 50px;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}
@media only screen and (max-width: 999px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas: "header" "content" "footer";
row-gap: 1rem;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu>li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu>li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}window.onscroll = function() {
scrollFunction();
};
// get initial pageYOffset value
let originOffset = window.pageYOffset;
function scrollFunction() {
// current pageYOffset value
const curOffset = window.pageYOffset;
if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
// down
document.getElementById('top-content').style.display = 'none';
document.getElementById("top-content").style.marginTop = "-50px";
} else {
// up
document.getElementById('top-content').style.display = 'flex'; // change this to flex
document.getElementById('top-content').style.transition = 'all 0.5s ease'; // change this to flex
document.getElementById("top-content").style.marginTop = "0";
}
// change originOffset value every time
originOffset = window.pageYOffset;
}https://stackoverflow.com/questions/73845476
复制相似问题