Search code examples
jquerycsscss-animationsjquery-waypoints

animate div from relative position to fixed using jquery / css on scroll

I'm trying to get a div to animate between relative position to a fixed position on scroll, so when you scroll down, you see the div slide from it's relative position, over to the right (fixed position) so it can now follow you down the page.

I'm using waypoints for the scroll function, and using jquery to add a class, then I'm trying to use css animation to get it to work. So far, it does a fade of the background colour then it just jumps to the right. I was hoping to get it to slide across.. Any ideas / help would be amazing.

Here's my code:

Waypoints / jquery:

$('.course-list').waypoint(function(direction){
        if(direction === 'down'){
            $('.course-list').addClass('side-bar');
        } else {
            $('.course-list').removeClass('side-bar');
        }
    },{offset:'66px'});

Note: I've also tried adding duration to add/removeClass, didn't work for me.

CSS:

section.content .introduction ul.course-list{position:relative;margin:0;padding:0;list-style:none;-webkit-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-o-transition: all 1.5s ease;transition: all 1.5s ease}

section.content .introduction ul.course-list.side-bar{-webkit-animation:slideRight 1.5s forwards;-moz-animation:slideRight 1.5s forwards;-o-animation:slideRight 1.5s forwards;animation:slideRight 1.5s forwards}

@-webkit-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-moz-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-o-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}

Note: I've also tried setting to absolute positioning, it still doesn't work for me..

HTML:

<ul class="course-list">
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
</ul>

Fiddle:

https://jsfiddle.net/gpv38jsv/

(it's set to do it straight away, so just hit Run and you'll see the jump)

Solution

  • Hope this helps, I dont have much time, but you can approach the issue by other perpective. Tell me how it was, here is an Idea that you can follow

    $(window).scroll(function(e){
	if(this.scrollY > 66){
  	$('.course-list').addClass('side-bar');
    $('.course-list').css({top:this.scrollY})
  }else{
  	$('.course-list').removeClass('side-bar');
    $('.course-list').css({top:0})
  }
})
    ul.course-list{
  position:relative;
  left:0;margin:0;padding:0;transition: all 1s linear;display:inline-block;right:auto;}

ul.course-list.side-bar{
  
  left:calc(100% - 200px);
}

body{
  height:1000000px;
  position:relative;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <ul class="course-list">
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
  </ul> 
</body>