在我的网页中,我有一个header,当我下降100像素时应该消失,而当我上升50像素时出现。
我写了这个脚本,但是似乎没有用
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();
}
}
// }
});
});