Javascript Jquery基于另一个div更改div'；s位置

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

我已经找了两天了，尝试了各种组合。但我就是不能让它工作

下面是一个布局示例

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

我试图实现的是，当div1（在本例中）距离屏幕顶部（浏览器窗口）100px时，更改div2（固定菜单）的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});
        }
    });
});

$（文档）.ready（函数（）{
var内容=$（“#div1”）；
var-top=$（“#div2”）；
$（窗口）.on（'scroll'，function（）{
如果（content.offset（）.top我不确定原因，但
$（“#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});
        }
    });
});

$（文档）.ready（函数（）{
var top=$（“#菜单”）；
$（窗口）.on（'scroll'，function（）{
如果（$（'#content'）.offset（）.top-$（window.scrollTop（））我不确定原因，但是
$（“#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});
        }
    });
});

$（文档）.ready（函数（）{
var top=$（“#菜单”）；
$（窗口）.on（'scroll'，function（）{
如果（$（'#content'）.offset（）.top-$（window.scrollTop（））看起来不错。请在此处添加更多代码。尝试使用jquery切换类：创建两个不同的类并根据您的条件进行切换；问题可能在.css（）中。也可以添加该类或制作一个fiddle。制作一个fiddle。我将尝试提供帮助。我看到的问题是$（“#content”）.offset（）.top始终返回500。它应该会更改。看起来不错。在此处添加更多代码。尝试使用jquery toggle类：创建2个不同的类并根据您的条件进行切换；问题可能在.css（）中。也可以添加该类，或者制作一个fiddle。制作一个fiddle。我将尝试提供帮助。我看到的问题是$（“#content”）.offset（）.top始终返回500。它应该会改变。谢谢！我在这件事上用头撞桌子已经两天了哈哈。问题解决了；）谢谢！我在这件事上用头撞桌子已经两天了哈哈。问题解决了；）