Div appear after scroll past a div

Question

I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.

But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.

Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).

Hope you guys can help!

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Now that we are talking in abstract terms, I will try to explain to the best of my ability.

Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.

This answer might help you in getting the current position of the targetDiv.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 15 '13 at 16:51

Neeraj

8,408
8
41
69

Haha, sorry for being vage! I'm just not that good at Javascript yet, I'm still learning. So I just don't know how to use your advice. This is the fiddle for letting a div appear after a certain amount of pixels. Could someone adjust this code so it will appear when the user scrolls past a div? http://jsfiddle.net/BinaryMuse/Ehney/ – David Hakkert Sep 15 '13 at 16:54
The code that you have in the fiddle, does exactly what you want. Show another div, when you scroll past another div. – Neeraj Sep 15 '13 at 16:59
I would suggest, take some-time to go through the basics of javascript, then jump on to jquery. That would be really helpful. I still have to do that a lot of times, go back to the references I had read just to keep things clear in my mind. – Neeraj Sep 15 '13 at 17:00
Ah, i see! But how do I connect this to an ID? Instead of header. Just replace 'header' with #idname ? – David Hakkert Sep 15 '13 at 17:51
Yes you are thinking on the right lines. :) That's exactly what you should do. – Neeraj Sep 15 '13 at 18:19

score 0 · Answer 2 · answered Sep 15 '13 at 16:52

So, do the following steps and let me know how it went:

1) Get jquery.appear

2) Apply the disappear event on your selector:

$('someselector').on('disappear', function(event, $all_disappeared_elements) {
      // this element is now outside browser viewport
    });

3) On that event just make the other div dissapear.

$('theStuffToHide').toggle()

4) Final result

$('someselector').on('disappear', function(event, $all_disappeared_elements) {
    $('theStuffToHide').toggle()
});

This should be the only thing you need.

Cheers, hope it helps.

Thx for the jquery.appear link! I'll try that! I'll let you know if it worked out! — David Hakkert, Sep 15 '13 at 20:51

score 0 · Answer 3 · answered Sep 15 '13 at 16:54

0

You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.

And when the pageoffset comes less that the calculated amount, make the div hide

answered Sep 15 '13 at 16:54

Ashis Kumar

6,494
2
21
36

Div appear after scroll past a div

3 Answers3