我想在从页面顶部向下滚动800像素时显示一个隐藏的div。现在我有这个例子，但我想它需要修改为了achive我正在寻找。
编辑：
[当scrollUp和高度小于800px，这个div应该隐藏]
HTML：
<div class="bottomMenu"> <!-- content --> </div>
css：
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
jQuery：
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
这里是我当前的代码Fiddle。
解决方法
如果您想滚动一个像素后显示一个div：
Working Example
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Scroll down... </p> <div class="bottomMenu"></div>
它简单，但有效。
Documentation for .scroll()
Documentation for .scrollTop()
如果你想滚动一个像素后显示一个div，
没有jQuery：
Working Example
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll",myScrollFunc);
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll",myScrollFunc);
body {
height: 2000px;
}
.bottomMenu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
transition: all 1s;
}
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
<div id="myID" class="bottomMenu hide"></div>
Documentation for .scrollY
Documentation for .className
Documentation for .addEventListener
如果你想滚动到它后显示一个元素：
Working Example
$('h1').each(function () {
var y = $(document).scrollTop();
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
$(document).scroll(function() {
//Show element after user scrolls 800px
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
// Show element after user scrolls past
// the top edge of its parent
$('h1').each(function() {
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.scrollPast {
width: 100%;
height: 150px;
background: blue;
position: relative;
top: 50px;
margin: 20px 0;
}
h1 {
display: none;
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Scroll Down...</p> <div class="scrollPast"> <h1>I fade in when you scroll to my parent</h1> </div> <div class="scrollPast"> <h1>I fade in when you scroll to my parent</h1> </div> <div class="scrollPast"> <h1>I fade in when you scroll to my parent</h1> </div> <div class="bottomMenu">I fade in when you scroll past 800px</div>
请注意，您无法获取设置为display：none;的元素的偏移量，而是获取元素的父代的偏移量。
Documentation for .each()
Documentation for .parent()
Documentation for .offset()
如果您想要有一个nav或div stick或停靠在页面的顶部，一旦你滚动到它，并退出/取消停靠，当你向上滚动：
Working Example
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
body {
height:1600px;
margin:0;
}
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno,nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit,morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse,cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
<nav>
<h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
</nav>
</div>
<p>Zombie ipsum reversus ab viral inferno,suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>