Question

我尝试过搜索但无法找到答案。试过这个解决方案：Change CSS element with JQuery when scroll reaches an anchor point但似乎没有效果？

基本上当用户向下滚动并且一个锚点进入视图时，在该锚点下面的DIV开始从0改变不透明度 - > 1

我在Jsfiddle尝试它但是只有当你滚过DIV而不是锚点时才开始改变不透明度，不知道我做错了什么

http://www.jsfiddle.net/c4ut7om9/2/

＆＃13;

var t = $("#trigger").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
   $("#superclass").animate({'opacity':'1'},5500);
    }
});

＆＃13;

DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

#superclass
{ 
    margin:50px; 
    padding:50px; 
    background-color:red; 
    height:300px;width:300px;
    opacity:0;
}

＆＃13;

    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <a id="trigger">TRIGGER - once this is in view, the red div should begin changing opacity from 0 to 1 </a>
    <div id="superclass">RED DIV</div>
    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>

＆＃13;

谢谢！

Answer 1

您正在检索文档的 top 的当前位置，因此在您滚动浏览#trigger元素之前，您的动画不会被触发。

您需要将window的高度添加到文档的顶部位置，并将该值与#trigger元素的位置进行比较。

因此，您的条件声明将是：

if ($(window).height() + $(this).scrollTop() > $("#trigger").offset().top) {
    // ...
}

Updated Example

var t = $("#trigger").offset().top;

$(document).scroll(function () {
    if ($(window).height() + $(this).scrollTop() > t) {
        $("#superclass").animate({
            'opacity': '1'
        }, 5500);
    }
});

页面滚动到达锚点时更改DIV的不透明度

1 个答案: