javascript - 当我在页面上时 div 淡入，当我滚动时淡出

Question

在我的网站中，我希望某个 div 仅在页面的该部分显示时出现，并且在我滚动时淡入淡出。

我的代码如下:

bio.html

<div ng-controller="bioCtrl" id="bio">
    <h1 style="color:white">Here goes my biography</h1>

    <div id="bioContainer" style="display: none">
        <h3>My Name</h3>
        <p>Hi my name is Pluto and here I write some stuff about my bio.</p>
    </div>
</div>

javascript如下

bio.js

angular.module('allApps').controller('bioCtrl', function($scope, $location, $window) {

    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > 520) {
            $("#bioContainer").fadeIn();
        } else {
            $("#bioContainer").stop().fadeOut();
        }
    });
});

这实际上工作正常，但是，如您所见，我说过当我滚动超过 520 像素时淡入必须开始。现在，520px 适合我的电脑窗口，但如果我有一个更小或更大的显示器，它会有不同的值，所以我想要的是当我进入“#bio”部分时淡入开始。

Answer 1

使用 .offset().top 获取 #bio 的顶部位置，然后调整你的 if 语句来检查 >$(this).scrollTop() 比那个大。

$(window).bind("scroll", function() {
    var fadeHere = $("#bio").offset().top
    if ($(this).scrollTop() > fadeHere) { 
        $("#bioContainer").fadeIn();
    } 
    // . . . 

当 #bio 到达窗口顶部时，这将导致淡入。如果您想在 #bio 首次出现在窗口底部时淡入，请使用

var fadeHere = $("#bio").offset().top - $(window).height()

这是一个工作 fiddle :https://jsfiddle.net/zqwhnkns/