Cannot get div to appear when 2nd div scrolls off page

Question

I have this 'magicbar' nav, that I wish to keep hidden until the user scrolls past the intro div (where that div goes off screen). I took my JQuery from this SO question here as well as replacing the '>=' with '==', like this SO question here.

I actually tried just telling the browser to set an alert that I had reached the end of the div, but that doesn't work either. I also tried moving the hidden div to the middle of the page in case the event was firing and it was 'showing' off screen. jQuery is loaded on the page, and it hides the div successfully, so the first part of the script is working. It's the meat n potatoes that are nonfunctional. Being a jQuery noob, I do not understand why this doesn't work.

Here is my code:

<script>
$("#magicnav").hide();
jQuery(function ($) {
    $('#intro').bind('scroll', function () {
       if ($(this).scrollTop() + $(this).innerHeight() == $(this).scrollHeight){
           $("#magicnav").show();
       }
    });
});   
</script>

**UPDATE Here is a jsfiddle of the problem.

score 1 · Answer 1 · answered Nov 08 '13 at 10:17

1

The correct way to getting scrollHeight is like:

$(this)[0].scrollHeight

or

$(this).prop('scrollHeight')

answered Nov 08 '13 at 10:17

palaѕн

72,112
17
116
136

This is in the original question I took my code from, which I initially used. It doesn't work. I tried the 2nd one, and that didn't work either. – huzzah Nov 08 '13 at 10:19
@huzzah: Could you please create a [**jsfiddle**](http://jsfiddle.net/) demonstrating your issue, if possible. – palaѕн Nov 08 '13 at 10:21
Well, I tried. http://jsfiddle.net/XN82s/ In the jsfiddle the div never even hides on page load. **UPDATED WITH JQUERY 1.10 turned on** – huzzah Nov 08 '13 at 10:28
That's because you have not included the jQuery file in **`Frameworks & Extensions`** section like [Fiddle Demo](http://jsfiddle.net/XN82s/1/). Now please update the fiddle and re-create your issue. – palaѕн Nov 08 '13 at 10:30
Well I looked into the demo but it clearly don't demonstrate the issue you have mentioned in your question. As, I am not even able to scroll. Please try to update it in your morning clearly showing the scroll issue. Have a Good Night! – palaѕн Nov 08 '13 at 10:49
I figured it out. The problem had to do with the fact that my div wasn't large enough to be 'scrollable' in the first place and I had to approach the problem in a different way. – huzzah Nov 08 '13 at 21:11

score 1 · Accepted Answer · edited May 23 '17 at 10:25

I figured it out. The problem had to do with the fact that my div wasn't large enough to be 'scrollable' in the first place and I had to approach the problem in a different way. Thanks to help from This SO question here I ditched the earlier code completely and instead of concentrating on the 'bottom of the div', I concentrated on reaching a certain point on the page.

$('#magicnav').hide();
   var target = $(".yellowbg").offset().top;
   var interval = setInterval(function() {
   if ($(window).scrollTop() >= target) {
      $('#magicnav').show();
      clearInterval(interval);
     }
  }, 250);

where 'yellowbg' is the class of the next section on the page AFTER the div I was targeting previously.

Cannot get div to appear when 2nd div scrolls off page

2 Answers2