Question

我有一个3 div s，相对位于我的页面右侧的绝对父div中。我希望它们在它们视图之外滚动（父div）时淡入淡出。在设置父div的定位之前，淡入淡出功能正在运行。我该如何解决？在此先感谢您的帮助！

<div class="container">
    <div class="row">
        <div class="col-sm-6" id="left_content">
            <img src="buffalo.png">
        </div>
        <div class="col-sm-6" id="content">
            <div class="right_content" id="box1">
                <h4>Hi. My name is Jack.</h4>
                <p>Scroll down for more info</p>
            </div>
            <div class="right_content" id="box2">
                <h4>I'm a 21 year old developer living in Buffalo, Ny.</h4>
            </div>
            <div class="right_content" id="box3">
                <h4>Hi. My name is Jack.</h4>
                <p>Scroll down for more info</p>
            </div>
        </div>
    </div>

JS：

$(window).scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $(window).scrollTop()) < 20) {
             $(this).stop().fadeTo(100, .5);
        } else {
             $(this).stop().fadeTo('fast', 1);
        }
    });
});

CSS：

#left_content {
     position: fixed;
}
.right_content {
     position: relative;
}
::-webkit-scrollbar { 
     display: none;
}
#content {
     width: 45%;
     height: 400px;
     overflow: scroll;
     position: absolute;
     right: 0;
}
h4, p {
     margin-left: 10%;
}
#box1 {
     top: 250px;
}
#box2 {
     top: 650px;
}
#box3 {
     top: 1050px;
     margin-bottom: 600px;
}

Answer 1

您的.scroll()不在适当的区域。因为您实际上是在滚动<div id="content">而不是窗口本身，所以请调整脚本：

<script type="text/javascript">

    $('#content').scroll(function () {
        $('[id^="box"]').each(function () {
            if (($(this).offset().top - $(window).scrollTop()) < 20) {
                $(this).stop().fadeTo(100, 0.5);
            } else {
                $(this).stop().fadeTo('fast', 1);
            }
        });

    });

</script>

滚动效果无效时多个div淡入/淡出

1 个答案: