Question

在我的网站中，我希望只有在显示该部分页面时才会显示某个div，并且当我滚动时会显示fadeIn和fadeOut。

我的代码如下：

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时必须启动fadeIn。现在，520px适用于我的电脑窗口，但如果我有一个更小或更大的显示器，它会有不同的值，所以我想要的是当我进入＆＃34; #bio＆＃时fadeIn开始34;部分。

Answer 1

使用#bio获取.offset().top的顶部位置，然后调整if语句以检查$(this).scrollTop()是否大于此值。

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

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

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

这是一个工作小提琴：https://jsfiddle.net/zqwhnkns/

div当我在页面上时FadeIn和当我滚动时FadeOut

1 个答案: