Jquery根据另一个div的位置更改div

Question

我先说一句，我刚学JS和Jquery，所以我的知识很有限。

我已经环顾了 2 天，尝试了各种组合。但我就是无法让它工作。

以下是布局示例

我正在寻找一种在 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});
        }
    });
});

Answer 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....