Show div on scrollDown after 800px

Question

I want to show a hidden div when scrolling down after 800px at the top of the page. I have this example so far, but I think it needs to be modified to achieve what I'm looking for.

EDIT:

[And if scrollUp and height is less than 800px, this div should hide]

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); } }); }); }); 

Here is the fiddle of my current code.

Answer 1

If you want to show the div after scrolling a few pixels:

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> 

Simple but effective.

Documentation for .scroll ()
Documentation for .scrollTop ()

---

If you want to show the div after scrolling a few pixels,

without 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

---

If you want to show an item after scrolling to it:

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> 

Please note that you cannot get the offset of elements set to display: none; instead, take the offset of the parent element.

Documentation for .each ()
Documentation for .parent ()
Documentation for .offset ()

---

If you want you to press nav or div or the dock at the top of the page, as soon as you scroll to the end and unfasten / undock when you scroll through the backup:

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, 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> 

Answer 2

You have something that happens there. One, why the class? Do you actually have several of them on the page? CSS tells you you can't. If not, you should use an identifier - choose faster in both CSS and jQuery:

 <div id=bottomMenu>You read it all.</div> 

Secondly, you have some crazy things in this CSS - in particular, the z-index should just be a number, not a pixel measured. It indicates on which layer this tag is located, where each larger number is closer to the user (or in another way, on top of / occlusal tags with lower z-indices).

The animation you are trying to do is basically .fadeIn (), so just set the div to display: none; natively and use .fadeIn () to animate it:

 $('#bottomMenu').fadeIn(2000); 

.fadeIn () works by first making the display: (regardless of the correct display property for the tag), opacity: 0, then gradually increasing the opacity.

Full working example:

http://jsfiddle.net/b9chris/sMyfT/

CSS

 #bottomMenu { display: none; position: fixed; left: 0; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: #fff; z-index: 1; } 

JS:

 var $win = $(window); function checkScroll() { if ($win.scrollTop() > 100) { $win.off('scroll', checkScroll); $('#bottomMenu').fadeIn(2000); } } $win.scroll(checkScroll); 

Answer 3

SCROLLBARS and $(window).scrollTop()

What I found is that calling functionality such as in the solution above, there are many other examples of this on this forum that all work well) only successfully when the scrollbars are really visible and working.

If (as I, perhaps, was silly trying), you want to implement such functionality, and you also want us to say to implement a minimalist "clean screen" free from scrollbars, for example, this discussion , then $(window).scrollTop() will not work.

This may be fundamental programming, but I thought that I would suggest any newbie-beginners to the leaders, as I thought about this for a long time.

If someone can offer some advice on how to overcome this or a slightly deeper understanding, feel free to answer as I had to resort to showing / hiding onmouseover / mouseleave instead of here

Live long and program, CollyG.

Answer 4

You can also do this.

 $(window).on("scroll", function () { if ($(this).scrollTop() > 800) { #code here } else { #code here } });