Jquery change div based on another div's position

Question

Let me start of by saying, I'm just now learning JS and Jquery, so my knowledge is very limited.

I've been looking around for 2 days now, and tried all sorts of combinations. But I just can't get this to work.

Below is an example of the layout

enter image description here

I'm looking for a way to trigger an event when div 1 is X px from the top of the screen. Or when div 1 collides with div 2.

What I'm trying to accomplish is to change the css of div 2 (the fixed menu) when div 1 is (in this case) 100px from the top of screen (browser window). Alternatively, when div1 passes div2 (I'm using responsive design, so the fixed height from top might become a problem on smaller screens right? Seeing as the header for example won't be there on a hand held.). So maybe collision detection is better here? Would really appreciate some thoughts and input on this matter.

Another issue is, div2 has to revert back to is previous css once div1 passes it (going back (beyond the 100px)).

This is what I have but it has no effect

    $(document).ready(function() {

    var content = $('#div1');
    var top = $('#div2');

    $(window).on('scroll', function() {
        if(content.offset().top <= 100) {
            top.css({'opacity': 0.8});
        }else{
            top.css({'opacity': 1});
        }
    });
});

Try using jquery toggle class: Create 2 different class and toggle based upon your conditions; http://api.jquery.com/toggleClass/ — John Smith, Aug 06 '13 at 08:07
@OptimusPrime Yes, to the extent of my knowledge (which is very little haha) this LOOKS correct. But yet, when I scroll nothing happens. — axelra82, Aug 06 '13 at 08:39
@JohnSmith Thank you for your suggestion. I tried the toggle class. But when I scroll, the "div2" just toggles between the two classes. Without regard to where the "div1" is on the screen. So the classes toggle, but when I scroll (period). I only want this to happen when the "div1" is 100px or less from the top of the browser window. Am I doing something wrong in the offset to top definition? if($('#div1').offset().top <= 100) — axelra82, Aug 06 '13 at 08:43
The problem may be within the .css(). Add that too or make a fiddle. — Optimus Prime, Aug 06 '13 at 08:44
@OptimusPrime Please see revised code in question (I've added css). — axelra82, Aug 06 '13 at 08:51
May be [this problem](http://stackoverflow.com/questions/10138232/jquery-applying-css-opacity) — Optimus Prime, Aug 06 '13 at 08:56
Try `.css('opacity',0.8)` and `.css('opacity',1)` in your code. Everywhere without "{}" braces. — Optimus Prime, Aug 06 '13 at 08:58
@OptimusPrime Tried it. Didn't help :( I've noticed (when I check element inspection in Chrome) that the else condition goes into effect as soon as I scroll. So the script above isn't stating to execute only when the "div1" is X px from top, it just executes when I scroll (without regard to position). And it also doesn't revert back when the "div1" is 101px or more away from the top. — axelra82, Aug 06 '13 at 09:03
The problem i see is $("#content").offset().top returns 500 always. It should change. — Optimus Prime, Aug 06 '13 at 10:46

score 1 · Accepted Answer · answered Aug 06 '13 at 10:54

I am not sure of the reason but $("#content").offset().top was giving a constant value on console. So I added window.scrollTOp() to check its distance from top, here is how it works,

$(document).ready(function() {
var top = $("#menu");
    $(window).on('scroll', function(){
        if(($('#content').offset().top - $(window).scrollTop()) <= 100){
            top.css({'opacity': 0.4});
        }else{
            top.css({'opacity': 1});
        }
    });
});

And DEMO JSFIDDLE....

THANK YOU! I've been banging my head against the table for 2 days on this now haha. Problem solved ;) — axelra82, Aug 06 '13 at 11:32

Jquery change div based on another div's position

1 Answers1