1

先说一下，我现在才学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});
        }
    });
});
4

1 回答 1

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

和演示 JSFIDDLE ....

于 2013-08-06T10:54:34.537 回答