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

Question

首先我要说的是，我刚刚学习JS和Jquery，所以我的知识非常有限。

我现在已经四处寻找，并尝试了各种组合。但我无法让它发挥作用。

以下是布局

的示例

我正在寻找一种方法来触发事件，当div 1是从屏幕顶部X px时。或者当div 1与div 2碰撞时。

我想要完成的是当div 1（在这种情况下）从屏幕顶部（浏览器窗口）100px时更改div 2（固定菜单）的css。或者，当div1通过div2时（我正在使用响应式设计，所以从顶部开始固定的高度可能会在较小的屏幕上成为问题吗？例如看到标题不会出现在手持设备上）。那么碰撞检测可能更好吗？非常感谢有关此事的一些想法和意见。

另一个问题是，一旦div1通过它，div2必须恢复到之前的css（返回（超过100px））。

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

    $(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 ....