jQuery根據另一個div的位置更改div

Question

首先，我現在正在學習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});
        }
    });
});

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