Как зафиксировать элемент на странице без fixed?

Question

[Александр Синицын]

Сделал через jquery, но при прокрутке заметен скачек элемента из старой позиции в новую. Как можно избавиться от этого дерганиия. fixed не подходит, т.к. выдергивает элемент из родителя.

Answer 1

[Илюша Прокопьев]

Вот такой код должен быть:

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

Comments

[Александр Синицын]

У меня смысл такой-же, только margin считается от родительского блока. В принципе похоже на параллакс, но фоновый блок должен стоять на месте.

Answer 2

[Артем]

Один из вариантов. Повесить функцию на события скролла. Где 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)"
    });
  }

}

Comments

[Александр Синицын]

Тоже пришел к варианту с translate, с ним дергание меньше. Хотя шаг при стандартном скроле мышью в винде уж больно велик, и смещение блока до его установки в новое место иногда все же проскакивает.

[Артем]

paramount1987.github.io/justgiving/search.html вроде не дергается

[Александр Синицын]

Интересно, надо попробовать порезать свой код, может дергает, что-то совсем другое...

Answer 3

[Александр Вульф]

Фиксирование элемента на странице подразумевает его обособленность. Что значит "выдергивает элемент из родителя"?

Comments

[Александр Синицын]

Блок вложен в другой блок и больше него. У родителя стоит overflow: hidden и фиксированный блок должен быть виден только внутри, а вне нет.

Answer 4

[Евгений Данилов]

Я так полагаю что блок становится sticky, надо либо на jquery animate тогда ставить с позицией, либо делать позиции максимально похожие как до так и после. А так сложно сказать без примеров кода или скриншота.