0

I am still very new to Jquery. I want to see how I can have one element scroll to a specific location in DOM and pause for a few scroll rotations. here is a codepen I have been playing with - http://codepen.io/mslfire/pen/dYovBZ

Any pointers where to go from here?

here is codepen code html

<div class="mine">
    <img class="scroll-to-item" src="http://placehold.it/350x150">
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2"></div>

Here is css

.scroll-to-item {
  margin: 0 auto;
  position: fixed; // edit
  top: 30%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.mine {
  height: 500px;
  background: grey;
}

.mine2 {
  height: 500px;
  background: lightblue;
}

.box-outline {
  margin: 0 auto;
  position: relative;
  top: 30%;
  left: 0;
  bottom: 0;
  right: 0;
  width: 350px;
  height: 150px;
  border: 5px solid red;
  color: red;
  text-align: center;
  line-height: 150px;
}

Here is BASIC what I am Seeking to do / JS

$(document).ready(function() {
    var pause = $('body').css({'overflow': 'hidden'});
    var resume = $('body').css({'overflow': 'scroll'});
    var x = 1200; // where x is the position to scroll to and then'pause'at
    var x2 = x + 1200; // where x2 is the next position to scroll to and then'pause'at
    var scrollRollTimes = 2 + scrollEvent; // where scrollRollTimes is # of times a user scrolls/moves - would be better if could be like a animation in time mil seconds 0.2s ex
    var scrollEvent = $(window).scroll(); // capture event
    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ]; //record the place of scroll / dom or does it?

    $(scrollPosition !== x).scroll(function(){
        $(pause).scroll(scrollRollTimes.resume);
    });
    $(scrollPosition !== x2).scroll(function(){
        $(pause).scroll(scrollRollTimes.resume);
    });
});

When .scroll-to-item is at x place from start - pause scroll. Pause for 'scrollRollTimes' user scrolls - resume scroll.

Mike
  • 45
  • 1
  • 1
  • 8
  • For a project of this nature you're probably going to want to look at something like https://github.com/Prinzhorn/skrollr instead of doing it yourself – Jack Guy Sep 08 '15 at 02:40
  • @Mike I answered a question that is very simular to your question, but it's not really a duplicate though. I went the extra mile on this answer but the OP hasn't returned yet (he wasted 400pt bounty). Anyways, it has a live demo and a direct download. The level of difficulty may be too high for a beginner, but what your'e asking can lead to some complex coding. Don't forget to up vote if it helps. http://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/32296174#32296174 – zer00ne Sep 08 '15 at 05:31
  • Wow - Chris you did a lot of work on this. I'm looking through info now. At first glance it looks like this is more a Scroll To id or smooth scrolling js. I'm looking to have fixed item pause at specific location and then resume scroll and repeat next location. Still looking at info – Mike Sep 08 '15 at 14:00

0 Answers0