javascript - jQuery根据另一个div的位置更改div

首先，我现在正在学习JS和Jquery，所以我的知识非常有限。

我已经环顾了两天，并尝试了各种组合。但是我只是无法解决这个问题。

以下是布局示例



我正在寻找一种方法，当div 1从屏幕顶部开始是X px时触发事件。或者，当div 1与div 2发生冲突时。

我要完成的工作是当div 1从屏幕顶部（浏览器窗口）到（在这种情况下）100px时，更改div 2的css（固定菜单）。另外，当div1通过div2时（我使用的是响应式设计，因此从顶部固定的高度在较小的屏幕上可能会成为问题，对吗？例如，抬头不放在手持设备上）。那么也许碰撞检测在这里更好？非常感谢您对此事的一些想法和投入。

另一个问题是，一旦div1通过（返回（超出100像素）），div2必须还原到先前的CSS。

这是我所拥有的，但没有效果

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

最佳答案

我不确定原因，但是$("#content").offset().top在控制台上给出了恒定值。因此，我添加了window.scrollTOp()来检查其与顶部的距离，这是它的工作原理，

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

还有DEMO JSFIDDLE ....