Question

我正在尝试在用户从页面顶部向下滚动时执行动画，并在用户试图向页面最大高度上方滚动时反转动画。目前没有任何东西触发，console.log没有使用我的scroll函数触发，我不知道为什么，任何帮助都很棒！：）

HTML：

<div class="mainframe">
    <div class="profile_info">
        <div class="titles">
            <h3>User</h3>
            <h1><?php echo stripslashes($uid); ?></h1>
        </div>
        <div class="bio">
            <img id="line_one" src="Social_Icons/Line 7@2x.png">
            <p><?php echo stripslashes($bio); ?></p>
            <img id="line_two" src="Social_Icons/Line 7@2x.png">
        </div>
    </div>
    <div class="headshot">
        <img src="<?php echo $profile_pic; ?>">
    </div>
</div>

CSS：

.mainframe {
    top: 0%;
    position: fixed;
    height: 100vh;
    width: 100vw;
    margin-top: 0;
    margin-bottom: 0;

}

.headshot {
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 99;
}

.slide-in {
    right: 50%;
}

.slide-up {
    top: -100%;
}

JS：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        console.log("firing original");
        setTimeout(function() {
            $(".headshot").addClass("slide-in");
        }, i*100);
        setTimeout(function() {
            $(".mainframe").addClass("slide-up");
        }, i*200);
    } else {
        console.log("firing reverse");
        setTimeout(function() {
            $(".mainframe").removeClass("slide-up");
        }, i*100);
        setTimeout(function() {
            $(".headshot").removeClass("slide-in");
        }, i*200);
    }
});

谢谢！

Answer 1

那是因为您的主机是固定的并且是全高的。删除

position: fixed;
height: 100vh;

通过它可以解决问题。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        console.log("firing original");
        setTimeout(function() {
            $(".headshot").addClass("slide-in");
        }, i*100);
        setTimeout(function() {
            $(".mainframe").addClass("slide-up");
        }, i*200);
    } else {
        console.log("firing reverse");
        setTimeout(function() {
            $(".mainframe").removeClass("slide-up");
        }, i*100);
        setTimeout(function() {
            $(".headshot").removeClass("slide-in");
        }, i*200);
    }
});

.mainframe {
    top: 0%;
    height: 100vh;
    width: 150vw;
    margin-top: 0;
    margin-bottom: 0;

}

.headshot {
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 99;
}

.slide-in {
    right: 50%;
}

.slide-up {
    top: -100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainframe">
    <div class="profile_info">
        <div class="titles">
            <h3>User</h3>
            <h1><?php echo stripslashes($uid); ?></h1>
        </div>
        <div class="bio">
            <img id="line_one" src="Social_Icons/Line 7@2x.png">
            <p><?php echo stripslashes($bio); ?></p>
            <img id="line_two" src="Social_Icons/Line 7@2x.png">
        </div>
    </div>
    <div class="headshot">
        <img src="<?php echo $profile_pic; ?>">
    </div>
</div>

Answer 2

几件事。

首先，您需要更改.mainframe类的高度，因为height: 100vh;意味着将不会滚动，它实际上与视图窗口一样高。除此之外，您还需要向overflow: scroll;类添加一个.mainframe。

这是该类的外观：

.mainframe {
  position: fixed;
  height: 200vh;
  width: 200vw;
  margin-top: 0;
  margin-bottom: 0;
  overflow: scroll;
}

除此之外，您还需要使用jQuery将滚动侦听器添加到.mainframe类，而不是窗口中。

它应该是这样的：

$('.mainframe').scroll(function() {    
    var scroll = $(window).scrollTop();
    ....
});

正如其他人提到的那样，i变量未在任何地方声明，因此会导致控制台错误。

如果您想仔细看一下，这里是JSFiddle（link）。

jQuery滚动不触发任何内容

2 个答案: