Using Jquery to move a div based on .scroll depending on window.scrollY

What I am trying to accomplish is to have a div appear from the left side after the user has scroll past a certain number of pixels. Then when it passes another point it moves to the right and disappears again. Then if the user scrolls back up to have the div reverse its movement.

The issue I am running into is that when the div moves to the right side it extends the view unlike when it was on the left side. I have tried changing the left value to a right value but nothing I have tried works.

  • Scaling Images Proportionally in CSS with Max-width
  • <select> dropdown list scroll not working for touch screens in chrome
  • Cannot position Google +1 button with CSS?
  • Sticky footer not sticking in AngularJS
  • Blocking CSS Resources
  • Pure HTML vs React. Same content not rendered equally. Why?
  • Here is the code I have so far for jQuery:

    window.addEventListener('scroll', function() {
      if (window.scrollY <= 50) {
        $('#leftinfo').animate({left: '-150%'});
      }
      else if (window.scrollY >= 50 && window.scrollY <= 200){
        $('#leftinfo').animate({left: '25%'}, 'swing');
      } 
      else if (window.scrollY >= 200) {
        $('#leftinfo').animate({left: '100%'}, 'swing');
      }
    });
    

    I also have a link to the JS Bin. which is http://jsbin.com/hadabe/7/edit?css,js,output

  • Internet Explorer 11 ignores list-style:none on the first load
  • Changing div style for every day of the week script
  • a hover button in react.js
  • I want to change ng-style multiple times in a JS function
  • How to get a google map to use 100% of its parent container?
  • Hide div by default and show it on click with bootstrap
  • 3 Solutions collect form web for “Using Jquery to move a div based on .scroll depending on window.scrollY”

    First of all, jQuery animations on same object are queued and executed in first come first serve order. you need to stop them first by calling .stop() to clear the animation queue so your new animation will execute right away.

    secondly, to prevent your window from extending the scrollable area, you need to instruct your html body to hide elements that overflow its boundries, but only on the x-axis.

    window.addEventListener('scroll', function() {
      if (window.scrollY <= 50) {
        console.log("phase I");
        $('#leftinfo').stop().animate({
          left: '-150%'
        });
      } else if (window.scrollY >= 50 && window.scrollY <= 200) {
        console.log("phase II");
        $('#leftinfo').stop().animate({
          left: '25%'
        }, 'swing');
      } else if (window.scrollY >= 200) {
        console.log("phase III");
        $('#leftinfo').stop().animate({
          left: '100%'
        }, 'swing');
      }
    });
    body {
      margin: 0;
      height: 75rem;
      width: auto;
      float: right;
      display: inline-block;
      overflow-x: hidden;
    }
    .frontintro {
      border: 1px solid black;
      background-color: #FFFFFF;
      padding: 1rem;
      display: inline-block;
      color: #000000;
      border-radius: 15px;
    }
    #leftinfo {
      position: absolute;
      top: 15rem;
      width: 65%;
      z-index: 100;
      left: -150%;
    }
    #leftinfo p {
      font-size: 2rem;
      text-align: center;
    }
    #rightinfo {
      float: right;
      position: relative;
      margin: 5rem;
      width: 35%;
    }
    #rightinfo p {
      font-size: 1.5rem;
      text-align: center;
    }
    #first {
      background: #c6bea6;
      background-size: cover;
      color: white;
      height: 52rem;
      margin: 0 auto;
      padding: 0;
      position: relative;
      z-index: 300;
    }
    #second {
      background: #9e9e9e;
      background-size: cover;
      color: white;
      height: 800px;
      margin: 0 auto;
      overflow: hidden;
      padding: 0;
      position: relative;
      z-index: 200;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="main-content">
      <div id="first">
        <div class="frontintro" id="leftinfo">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim.</p>
        </div>
        <!-- End of .frontintro & leftinfo -->
      </div>
      <!-- End of #first -->
      <div id="second">
        <div class="frontintro" id="rightinfo">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim. Praesent pellentesque sagittis lacinia. Pellentesque tincidunt diam at turpis tincidunt egestas.</p>
        </div>
        <!-- End of .frontintro & .rightinfo -->
      </div>
      <!-- End of #second -->
    </div>

    Add this to your CSS:

    #main-content {
       overflow-x:hidden;
    }
    

    This will prevent your parent div from dynamically resizing to fit its children.

    You can read more about the overflow property here:
    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

    You can try this code.

    window.addEventListener('scroll', function() {
      var offset = $('#first').offset();
      var height = $('#first').height();
      var computed = parseInt((offset.top + height) / (height / 2));
      if (window.scrollY < computed) {
         $('#leftinfo').stop().animate({left: '-150%'});
      } else if (window.scrollY >= computed && window.scrollY < parseInt((offset.top + height) / 2)) {
         $('#leftinfo').stop().animate({left: '25%'}, 'swing');
      } else if (window.scrollY >= parseInt((offset.top + height) / 2)) {
         $('#leftinfo').stop().animate({left: '100%'}, 'swing');
      }
    });