站点 Header 可见基于 scrollTop 和 scrollUp?
Site Header visible based off scrollTop and scrollUp?
在我的网页中,我有一个 header 当我向下移动 100px 时它应该消失,当我向上移动 50px 时它应该出现。
我写了这个脚本,但它似乎不起作用
CSS
/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
#site_header {
display:none;
width:100%!important;
}
}
脚本
jQuery(document).ready(function( $ ) {
jQuery(window).scroll(function() {
//Decides when this script will work 1024
if ( $ (window).width() > 1024) {
//How far down does the user has to scroll 100px
if ( $ (window).scrollTop() >= 100) {
$ ('#site_header').fadeOut();
} else {
if ( $ (window).scrollUp() >= 50) {
$ ('#site_header').fadeIn();
}
}
});
});
更新 我把 link 放在我找到的地方并复制了有助于你理解的代码。
基本上我想要的是反转代码
这是我认为您所追求的示例:https://jsfiddle.net/rok4Lwz5/18/
HTML
<div id="site_header"></div>
<div id="siteBody"></div>
CSS
/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
/*#site_header {
display :none;
}*/
}
#site_header {
position: absolute;
display: block;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: red;
z-index: 2;
}
#siteBody{
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 110vh;
background-color: blue;
z-index: 1;
}
JavaScript + jQuery 3.3.1
jQuery(document).ready(function(e) {
console.log('document ready');
jQuery(window).scroll(function(e) {
console.log($(window).width());
console.log($(window).scrollTop());
// console.log($(window).scrollUp());
// if ($(window).width() > 1024) {
if ($(window).scrollTop() >= 50) {
console.log('hide');
$('#site_header').fadeOut();
} else {
if ($(window).scrollTop() < 50) {
console.log('show');
$('#site_header').fadeIn();
}
}
// }
});
});
在我的网页中,我有一个 header 当我向下移动 100px 时它应该消失,当我向上移动 50px 时它应该出现。
我写了这个脚本,但它似乎不起作用
CSS
/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
#site_header {
display:none;
width:100%!important;
}
}
脚本
jQuery(document).ready(function( $ ) {
jQuery(window).scroll(function() {
//Decides when this script will work 1024
if ( $ (window).width() > 1024) {
//How far down does the user has to scroll 100px
if ( $ (window).scrollTop() >= 100) {
$ ('#site_header').fadeOut();
} else {
if ( $ (window).scrollUp() >= 50) {
$ ('#site_header').fadeIn();
}
}
});
});
更新 我把 link 放在我找到的地方并复制了有助于你理解的代码。
基本上我想要的是反转代码
这是我认为您所追求的示例:https://jsfiddle.net/rok4Lwz5/18/
HTML
<div id="site_header"></div>
<div id="siteBody"></div>
CSS
/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
/*#site_header {
display :none;
}*/
}
#site_header {
position: absolute;
display: block;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: red;
z-index: 2;
}
#siteBody{
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 110vh;
background-color: blue;
z-index: 1;
}
JavaScript + jQuery 3.3.1
jQuery(document).ready(function(e) {
console.log('document ready');
jQuery(window).scroll(function(e) {
console.log($(window).width());
console.log($(window).scrollTop());
// console.log($(window).scrollUp());
// if ($(window).width() > 1024) {
if ($(window).scrollTop() >= 50) {
console.log('hide');
$('#site_header').fadeOut();
} else {
if ($(window).scrollTop() < 50) {
console.log('show');
$('#site_header').fadeIn();
}
}
// }
});
});