Jquery scroll not firing anything

Question

I'm trying to execute an animation when the user scrolls down from the top of the page, and reverse the animation when the user tries to scroll above the max height of the page. Currently nothing is getting triggered, and the console.log isn't firing with my scroll function, and i can't figure out why, any help would be awesome! :)

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

Thank you!

Answer 1

So a couple of things.

First, you need to change the height of the .mainframe class because height: 100vh; means that there will be no scrolling, it's literally as tall as your view window. Aside from that, you need to add an overflow: scroll; to the .mainframe class.

This is how the class should look like:

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

Aside from this, you'll need to the jQuery to add the scroll listener to the .mainframe class, and not the window.

This is how it should look like:

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

And as others have mentioned the i variable is not declared anywhere so it's causing an error in the console.

Here's a JSFiddle if you'd like to take a closer look (link).

Answer 2

That's because your mainframe is fixed and full height. removing

position: fixed;
height: 100vh;

from it would fix the issue.

$(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>