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

实际上，这工作得很好，但是，正如您所看到的，我说过当我滚动超过 520px 时必须开始淡入淡出。 现在，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/