Hello all,

 

 

I'm trying to design a section of a website that slides out from a fixed position half way down my view port and then as the user scrolls down and the element gets to the top of the page it then stops at the top of the view port, then when the user scrolls back up to the top of the page the element returns to it's normal fixed position.

 

 

I've created a piece of code that slides the element out from the side of the view port and then when the user scrolls down the element jumps, (not scrolls), to the top of the view port, however, when the user scrolls back up to the top the element doesn't stop at it's fixed position, (you have to refresh the page to get it back again).

 

 

Here's the code:

 

 

CSS:

 

 

      
     .replies {
          position:fixed;
          top:600px;
          right:5.5%;
 
     }
 
    .fixed_replies {
         position:fixed;
         top:0px;
         right:5.5%;
    }
 

 

JavaScript;

 
    $(document).ready(function() {
 
         // Hide element when page loads
         $(".replies").hide();
       
        $("#animate").click(function() {
             // Slide element out 
           $(".replies").animate({width:'toggle'},350);
 
          $(window).scroll(function() {
          // Check if element is 600 pixels from top
          if($(this).scrollTop() > 600) {
                // Change class to fixed_replies
               $('.replies').removeClass('replies').addClass('fixed_replies');
               // Check if element is less than 600 pixels from top
          } else if($(this).scrollTop() < 600) {
               // Change class to replies
              $('.replies').removeClass('fixed_replies').addClass('replies');
         }
     });
 });
});

I've googled for every tutorial but cannot find the right one. If anyone knows how to animate the element so it doesn't jump to the top of the view port and how to make the element return to it's starting fixed position without having to refresh the page, or if anyone knows of a link to a tutorial that could help then please let me know.

Thanks in advance

If you think about the code you're removing the replies class when the window has reached 600px, so it won't find it when you want to position the element again.

You don't need to remove the class, any added class will override the previous one. You could use toggleClass

$(function () {
    var $replies = $('.replies');
    $replies.hide();

    $("#animate").click(function () {
        $replies.animate({
            width: 'toggle'
        }, 350);
    });

    $(window).scroll(function () {
        $replies.toggleClass('fixed_replies', $(this).scrollTop() > 600);
    });
});

to prevent the jump to the top add a transition property in the CSS.

If you are animating DOM elements using JavaScript try to avoid those that force full DOM repaints like adjusting left, right top, bottom etc. translate3d(x,y,z); is a way of translating an element and it forces the element onto a new layer, which in turn forces the GPU to render rather than the CPU. In short the animation will be a lot smoother.

 

Another thing to add is that jQuery's animate method is horribly inefficient and often results in choppy animations. The easiest alternative is to use jQuery to add / remove a class once you scroll to the appropiate location, then using CSS you can animate using translate3d and a transition.

Another alternative is to use an animation library like velocity.js, it directly replaces the jQuery animate method with one called velocity.

Edited January 20, 201511 yr by rbrtsmith

Thanks,

 

It works, the element now moves from one position to another without having to refresh the page. I'll research transitions.