How to fix an element on a page without fixed?

Question

css

I did it using jquery, but when scrolling, the element jumps from the old position to the new one. How can I get rid of this twitching. fixed is not suitable, because pulls the element from the parent.

Answer 1

This is the code that should be:

$(window).scroll(function(){
    $("#your_block").css({"margin-top":$(this).scrollTop()});
});

Answer 2

One of the options. Attach a function to scroll events. Where top is the scroll top.

var topOffset = $("#map-search").offset();

function mapSearchScroll(top,topOffset){
  

  if(top > topOffset.top){
    $("#map-search").css({
      "-webkit-transform":"translate(0," + (top - topOffset.top) +"px)",
      "-ms-transform":"translate(0," + (top - topOffset.top) +"px)",
      "transform":"translate(0," + (top - topOffset.top) +"px)"
    });
  }else{
        $("#map-search").css({
      "-webkit-transform":"translate(0,0)",
      "-ms-transform":"translate(0,0)",
      "transform":"translate(0,0)"
    });
  }

}

Answer 3

Fixing an element on the page implies its isolation. What does "pulls an element from its parent" mean?

Answer 4

I believe that the block becomes sticky, then you must either put it on jquery animate with a position, or make the positions as similar as possible both before and after. And it's hard to say without code examples or screenshots.