如果要在滚动多个像素后显示div，请执行以下操作：
$(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 ></div>它简单但有效。
如果要在滚动多个像素后显示div，
没有jQuery：
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" ></div>.scrollY 文档.className 文档.addEventListener文档
如果要在滚动到元素后显示它：
工作实例
$('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 > <h1>I fade in when you scroll to my parent</h1></div><div > <h1>I fade in when you scroll to my parent</h1></div><div > <h1>I fade in when you scroll to my parent</h1></div><div >I fade in when you scroll past 800px</div>请注意，您无法获取设置为
display: none;的元素的偏移量，而是获取元素父元素的偏移量。
如果要在每次滚动时导航或div导航或停靠在页面顶部，并在向上滚动时取消导航/取消导航，请停靠：
工作实例
$(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, 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>
