Sidebar to scroll down/up as user scroll down/up the browser window without using position: sticky and fixed?

Question

I need sidebar to scroll down as we scroll down and I cannot use CSS positions – fixed / sticky because the sidebar horizontal position needs to be consistent with the form on zoom in and zoom out and should work on both chrome and IE11, however I am using positon relative and absolute. I tried putting logic to modify top property of sidebar (position: absolute) as we scroll down by calculating the position of form above the viewport using getBoundingClientRect() function, but the transition of sidebar from one position to another is not smooth and gives a bad user experience. There needs to be some logic which can change the position of sidebar smoothly and bring it up/down a Image of sidebar with viewport s we scroll up/down.

Answer 1

I have got his working with combination of relative and fixed positioning. position: relative when user scroll is less than 250px and if user scroll is greater than 250px the position property is changed to fixed with top: 150px without providing right/left property. The key to the solution is by not providing right/ left property which is causing horizontal position of the side bar to stay consistent with the position of form on zoom in/out by keeping horizontal position of sidebar relative to its own initial position. Earlier, I was providing right property along with top with position: fixed. On zoom in, right: 50px property was causing sidebar to gradually move away from the Form and move closer to the right edge of the viewport and making it look weird.

As per the answer for ( Position fixed without top and bottom ) – “Using fixed position without setting top, left, .. will have the same behave as absolute position relative to its own initial position. But setting the top, left, ... will fix the position relative to the document or the page.”

//sidebar.js
handleSidebarScroll() {
$(document).scroll(function() {
    let scrollTop = $(window).scrollTop;
    let sidebar = $('.sidebar');
    if(scrollTop < 250 ) { 
        If(sidebar.hasClass('sticky-sidebar-bottom')){
        sidebar.removeClass('sticky-sidebar-bottom');
    }
    sidebar.addClass('sticky-sidebar-top');
  }
    else {
        if(sidebar.hasClass('sticky-sidebar-top')){
        sidebar.removeClass('sticky-sidebar-top');
    }
   sidebar.addClass('sticky-sidebar-bottom');
    }
}

//SCSS
.sidebar-container{
    position: relative;
    }
.sidebar {
    width: 200px;
    height: 65vh;
    border: 5px solid black;
    &.sidebar-sticky-top{
        position: absolute;
        top: 50px;
        }
    &.sidebar-sticky-bottom{
        position: fixed;
        top: 150px;
        }
}

For those who are new to scss – “&.sidebar-sticky-top” Is to select element which has both classes – “sidebar” and “sidebar-sticky-top” . &. Is parent selector and refers to outside selector (“.sidebar” in this case )