I'm trying to implement a scroll function which moves elements based on where the user scrolls, this code works so far and it does move elements.

The thing is I want to have a list of different functions which moves specific elements whenever you scroll past a certain div based on it's id or class.

I thought if I changed $("#pagelight2").scrollTop() it would work but that did not help

Any guidance would be appreciated

Thanks

Updated code works but it is really glitchy whenever I scroll up the animation stops moving - anybody know more efficient way to get this to work?

    var $scrollingDiv = $(".Page3-PeopleWalkingDown");

    var p = $("#pagedark3");

    var offset = p.offset();

    var top = offset.top;

    $(window).scroll(function() {

                var scrollval = $(window).scrollTop() - top;

                if ($(window).scrollTop() > 1400) {
                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": "-" + (scrollval) + "px"
                        });

                } else


                {

                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": +(0) + "px"
                        });
                }

I'm trying to implement a scroll function which moves elements based on where the user scrolls, this code works so far and it does move elements.

The thing is I want to have a list of different functions which moves specific elements whenever you scroll past a certain div based on it's id or class.

I thought if I changed $("#pagelight2").scrollTop() it would work but that did not help

Any guidance would be appreciated

Thanks

Updated code works but it is really glitchy whenever I scroll up the animation stops moving - anybody know more efficient way to get this to work?

    var $scrollingDiv = $(".Page3-PeopleWalkingDown");

    var p = $("#pagedark3");

    var offset = p.offset();

    var top = offset.top;

    $(window).scroll(function() {

                var scrollval = $(window).scrollTop() - top;

                if ($(window).scrollTop() > 1400) {
                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": "-" + (scrollval) + "px"
                        });

                } else


                {

                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": +(0) + "px"
                        });
                }

• javascript
• jquery
• html
• css

• If you're still looking for a better solution, Can you provide sample HTML/CSS that goes with the shared js..? – T J Commented Nov 21, 2014 at 9:08

6 Answers 6

What you need to do is calculate the offset height of each specific DIV with respect to the top of the page or scrollable area.

Then, using your .scroll() function, when the offset is reached (i.e. the 'div' offset matches the 'scroll' position) you can fire your animation off.

Also, (based on a slightly different offset (e.g. div offset -600px) you could 'reset' the animation if the user scrolls back up the page, past the animation. Although, this might end being annoying to the user and more work than benefit . . .

offset : http://api.jquery.com/offset/

scrollTop : http://api.jquery.com/scrolltop/

Skrollr allows you to animate any CSS property of any element (if you know the position/offset of your div) depending on the scrollbar position.

For example, you can change the background-color of a div starting at red when the scrollbar is at the top and ending with green when the top of div hits the top of the window.

var s = skrollr.init();

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>

<div style="height: 100px"></div>
<div data-0p="background-color: red;" data-100="background-color: !green;" style="height: 200px;background-color: red;" >
</div>

i would suggest you to check on https://github.com/customd/jquery-visible

This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true. This way you actually can find if the user has scrolledby different elements and apply the animations you want.

Then you can use your current code to get the numbers you want about how much is scrolled etc..

I can see how jquery's animate is causing issues, every time you scroll the animation is going to stop.. I decided to take another approach.

See example here: http://jsfiddle.net/xgmbf5ro/3/

$(window).scroll(function() {
    var offset = $(self).offset();
    var distance = parseInt(offset.top) - parseInt($(window).scrollTop());
    var l = (distance / parseInt($(self).outerHeight())) * 100;

    if (l > 0) {
        l = "0";
    }

    $(self).css("left", l+"%");
});

When I scroll the page, I find out how far we've scrolled vertically through the DOM element we're animating. Then I take that value and replace the left property of that element. no more .animate(), No more glitches!

I've made it a jQuery plugin, so you can apply it to as many divs as you want like so: $("#myDiv").slideOut();.

The only problem with this solution is if the browser doesn't have smooth scrolling.

I would suggest you to use wow.js

https://github.com/matthieua/WOW

It is very easy to use and here is demo page. http://mynameismatthieu.com/WOW/

There are times when you would want to display a bar at the top of the page when user scrolls on the page and it should go back to its original position when the user scrolls back up. This is particularly useful when you want to add say a share bar, a search bar, etc and make it always visible even when the user is at the bottom of the page.

please try like this

https://www.virendrachandak.com/techtalk/make-a-div-stick-to-top-when-scrolled-to/