tween / move element, if possible from / to a class, as user scrolls

Question

I'm trying to move an element as the user scrolls.

If possible, to a class on scroll up and from a class on scroll down.

I want the element to move along with the scroll only if a certain condition is true.

So, I want the element to move down as the user scrolls up, if hasScrolledUp and scrollingUp are both true.

Then I want the element to move up as the user scrolls down, if downAfterUp is true.

Here is code that I have that sets those booleans:

    var lScrollTop = 0;
    var hasScrolledUp = false;
    var scrollingUp = false;
    var downAfterUp = false;
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop>lScrollTop){
            hasScrolledUp = true;
            scrollingUp = true;
        }
        else{
            if(scrollingUp) scrollingUp = false;
            if(hasScrolledUp) downAfterUp = true;
        }
        lScrollTop = scrollTop;
    });

I would greatly appreciate any and all help!

score 1 · Answer 1 · edited May 23 '17 at 10:24

I recommend that check out this example: stackoverflow.com/a/24815216...

The scroll event behaves oddly in Firefox, it is fired a lot of times because of the smoothness scrolling, but it works, here are an example:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "35px",
    left: "35px" });

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        lastScrollTop = $(target).data("lastScrollTop") || 0,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }
    $("#test").html(scrollText +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
    //saves the current scrollTop
    $(target).data("lastScrollTop", scrollTop);
});

score 1 · Answer 2 · answered Jul 17 '14 at 03:33

Adding onto jherax's answer, I added a function that will move a position:fixed div a percentage of the way on each scroll.

function ScrollMoveDiv(scrollTop){
var windowHeight = $(window).height();
var totalHeight = $(document).height() - windowHeight;
var MovePercentage = (scrollTop * 100)/totalHeight;
return MovePercentage+"%";
}

//attaches the "scroll" event
$(window).scroll(function (e) {
    var body = document.body,
        scrollTop = $("html").scrollTop() || $(body).scrollTop(),
        lastScrollTop = $(this).data("lastScrollTop") || 0,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    var MoveDistance = ScrollMoveDiv(scrollTop);
    $('.moving').css('bottom',MoveDistance);

    $("#test").html(scrollText +
      "<br>lastScrollTop: " + lastScrollTop +
      "<br>currentScrollTop: " + scrollTop);

    //saves the current scrollTop
    $(this).data("lastScrollTop", scrollTop);
});

JSFiddle: http://jsfiddle.net/8MJnB/

tween / move element, if possible from / to a class, as user scrolls

2 Answers2