滚动到div除以div只有一个滚动，div已经相互滚动

时间：2016-08-21 16:18:58

标签： javascript jquery html css

我让我的div相互滚动，没有它们向上滚出屏幕，例如（jsfiddle}。

＆＃13;
＆＃13; 
(function($){
    /* Store the original positions */
    var d1 = $('.one');
    var d1orgtop = d1.position().top;
    var d2 = $('.two');
    var d2orgtop = d2.position().top;
    var d3 = $('.three');
    var d3orgtop = d3.position().top;
    var d4 = $('.four');
    var d4orgtop = d4.position().top;
    
    /* respond to the scroll event */
    $(window).scroll(function(){
        /* get the current scroll position */
        var st = $(window).scrollTop();

        /* change classes based on section positions */
        if (st >= d1orgtop) {
            d1.addClass('latched');
        } else {
            d1.removeClass('latched');
        }
        if (st >= d2orgtop) {
            d2.addClass('latched');
        } else {
            d2.removeClass('latched');
        }
        if (st >= d3orgtop) {
            d3.addClass('latched');
        } else {
            d3.removeClass('latched');
        }
        if (st >= d4orgtop) {
            d4.addClass('latched');
        } else {
            d4.removeClass('latched');
        }
    });

})(window.jQuery);
＆＃13; 
.container {
    background: black;
    position: relative;
}
.spacer {
    width: 0;
    height: 600px;
    float: left;
     clear: both;
}
.one { background:red; width: 100%; height: 600px; position: relative; float: left; }
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; }
.three { background: green; width: 100%; height: 600px; position: relative; float: left; }
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; }
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->

<div class="spacer"></div>
<div class="one">
    <h2>ONE</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>

    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="two">
    <h2>TWO</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>

    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="three">
    <h2>THREE</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>

    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="four">
    <h2>FOUR</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>

    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>
＆＃13;
＆＃13;
＆＃13;

现在我想从div滚动到div，只有一个滚动（从一个部分滚动到另一个部分） - 请参见此处的示例jsfiddle。同时仍然维持一个div滚动到另一个div的动画效果

1 个答案:

答案 0 :(得分：0)

您必须稍微修改一下设置。我将你的div放入一个数组然后修改你的代码，以便它跟踪滚动事件的目标div。您还需要忽略滚动到元素时生成的滚动事件。 this answer的代码在这方面有所帮助。

这是您的更新代码（也保持了div修复效果）：

(function($) {
  var prevScroll = 0; //stores last successful scroll
  var scrollIdx = 0; //current index in your div array
  //array that contains the div object and original offset from the top to handle the animation
  var divs = [{
    div: $('.one'),
    top: $('.one').position().top
  }, {
    div: $('.two'),
    top: $('.two').position().top
  }, {
    div: $('.three'),
    top: $('.three').position().top
  }, {
    div: $('.four'),
    top: $('.four').position().top
  }];
  var scrollDestination = -1; //stores the target div's offset 

  // handles div fixing as the scroll transitions from one div to the next
  function setLatch(st) {
    divs.forEach(function(divObj) {
      if (st >= divObj.top) {
        divObj.div.addClass('latched');
      } else {
        divObj.div.removeClass('latched');
      }
    })
  }

  /* respond to the scroll event */
  $(window).scroll(function(e) {
    /* get the current scroll position */
    var st = $(window).scrollTop();
    var scrollDir = 0;

    //reset the latch as the scroll occurs
    setLatch(st);

    // check the state of the scroll event
    if (scrollDestination == -1) { //we're done scrolling
      //noop
    } else if (st != scrollDestination) { //we're still scrolling, ignore
      return;
    } else if (st == scrollDestination) { //we're done, but ignore this final scroll event
      scrollDestination = -1;
      prevScroll = st;
      return;
    }

    //determine the direction of the scroll;
    if (st > prevScroll) {
      scrollDir = 1;
    } else {
      scrollDir = -1;
    }

    if (scrollIdx + scrollDir == divs.length || scrollIdx + scrollDir < 0) {
      //do nothing bu update the prevScroll so we can accurately 
      //capture the direction the next time around
      prevScroll = st;
      return;
    }

    scrollIdx += scrollDir;
    //record the destination of the next div
    scrollDestination = divs[scrollIdx].top;
    $('html, body').animate({
      scrollTop: divs[scrollIdx].top
    }, {
      duration: 1000
    });

  });

})(window.jQuery);
.container {
  background: black;
  position: relative;
}
.spacer {
  width: 0;
  height: 600px;
  float: left;
  clear: both;
}
.one {
  background: red;
  width: 100%;
  height: 600px;
  position: relative;
  float: left;
}
.two {
  background: blue;
  width: 100%;
  height: 600px;
  position: relative;
  float: left;
}
.three {
  background: green;
  width: 100%;
  height: 600px;
  position: relative;
  float: left;
}
.four {
  background: yellow;
  width: 100%;
  height: 600px;
  position: relative;
  float: left;
}
.latched {
  position: fixed;
  top: 0;
  left: 8px;
  right: 8px;
  width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->

<div class="spacer"></div>
<div class="one">
  <h2>ONE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
    erat. Sed ultrices ornare volutpat.</p>

  <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="two">
  <h2>TWO</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
    erat. Sed ultrices ornare volutpat.</p>

  <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="three">
  <h2>THREE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
    erat. Sed ultrices ornare volutpat.</p>

  <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="four">
  <h2>FOUR</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
    erat. Sed ultrices ornare volutpat.</p>

  <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>

相关问题
最新问题