How to move HTML elements when a page is scrolled?

Question

How to make an HTML element that is initially 'fixed' then when we scroll the web page down or more specifically through the element, the element will move to the side or wherever we specify. And of course when we scroll the web page back up and pass the element, it will return to normal.

Please help if there is, I ask for an article or explanation of what to use and an example of the source code.

Answer 1

You can use sticky for that: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Answer 2

I'm using jQuery for something similar on my app. The following code will add the class of 'scroll-active' to the 'nav' when scrolled 10px, and removes it when there is nothing scrolled.

$(function () {
    $(window).on('scroll', function () {
        if ( $(window).scrollTop() > 10 ) {
            $('nav').addClass('scroll-active');
        } else {
            $('nav').removeClass('scroll-active',);
        }
    });
});

I think you can use this and add the necessary css to it on your added class to have it on the right side.

Answer 3

You'll probably need javascript for that, this might work for you if you don't want to use jQuery.

<div id="container">
  some content
</div>

and some javascript to define add a class:

window.addEventListener('scroll', function(e) {
  container = document.getElementById('container');
  // The 0 could be a larger threshold if you want to move it after scrolling a bit
  container.classList.toggle('scrolling', window.scrollY > 0); 
});

and then define your CSS:

#container {
  /* style when not scrolling */
}

#container.scrolling {
  /* style when scrolling */
  position: fixed;
}

here is a working jsfiddle: https://jsfiddle.net/96xvotpc/2/