fade in div when user gets to scrolls to section of website

Question

I have Jquery code to fade certain divs when the page loads. how would i edit this code to trigger this when the user scrolls 2000px on my webpage.

JQUERY

    $(function () { $(window).load(function() {
    $('.welcome-image').addClass('animated fadeInRightBig');
})
  var reset = function reset() {
          console.log($(this).scrollTop());
            // do stuff when window `.scrollTop()` > 75
            if ($(this).scrollTop() > 2000) {
              // turn off scroll event so `fx` not called
              // during ongoing animation
              $(this).off("scroll");
                // when all animations complete
                fx()
            }
        };
        // if `fx` should only be called once ,
        // change `.on()` to `.one()` ,
        // remove `.then()` callback following `fx()`
        // within `reset`
        $(window).on("scroll", reset);
    });

Possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — Dekel, Aug 28 '16 at 12:12
check this [JQuery fade-in a div when user scrolls to that div](http://stackoverflow.com/questions/5367731/jquery-fade-in-a-div-when-user-scrolls-to-that-div) — barha, Aug 28 '16 at 12:14
get the exact `scroll postiion` you need and when the page `scroll position` is equal to that position, fire you function. — caldera.sac, Aug 28 '16 at 12:23
added a small example to get you an idea.try it.hope that will help to you. — caldera.sac, Aug 28 '16 at 12:31

score 0 · Answer 1 · answered Aug 28 '16 at 12:29

0

try this

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">

body{
  height: 1000px;
}
</style>

<body>
 <h2>scroll the body to see the magic</h2>

</body>

<script type="text/javascript">
$(window).on("mousewheel", function() {
        var the_position = $(document).scrollTop();
        if (the_position > 200) 
          {
            $('body').css({"background-color":"red"});
          }
          else
          {
            $('body').css({"background-color":"white"});
          }
    });

</script>

</html>

chagne the function and other things as your need. this is an example to get you and idea.

answered Aug 28 '16 at 12:29

caldera.sac

4,918
7
37
69

seems to still load as soon as the page loads? – iamdanmorris Aug 28 '16 at 12:38
It's happening as soon as mouse wheel is scrolled not when at part of page. – iamdanmorris Aug 28 '16 at 12:46
no it happens when the `scroll positioin` is greater than `200`. didn't you try the example. scroll it down and up, then see what is goin on. – caldera.sac Aug 28 '16 at 12:50
does JQuery function in the same way if being viewed in local view? – iamdanmorris Aug 28 '16 at 12:54
what do you ment, if you use jquery online, you should have internet. otherwise, you should have linked jquery properly to your project. – caldera.sac Aug 28 '16 at 12:55
i have internet using a local folder to host site at the momemnt – iamdanmorris Aug 28 '16 at 13:08

Prashant Pandey · Answer 2 · 2016-08-28T13:39:28.753

0

$(window).load(function() {
    $(window).on('scroll', function () {
       if ($(window).scrollTop() > $("#section").scrollTop()) {
          $('.welcome-image').addClass('animated fadeInRightBig');
       }
   });
})

It might help you

edited Aug 28 '16 at 13:39

answered Aug 28 '16 at 13:00

Prashant Pandey

23
1
7

fade in div when user gets to scrolls to section of website

2 Answers2