Фон fixed дергается при скрытии скролла?

Question

[Артем]

Есть фон position: fixed в div с position: relative
Почему он дергается и как это предотвратить. Скролл прописан на js все высчитывает хорошо.
Как можно обойти этот момент?
Может кто сталкивался? Буду очень признателен

Comments

[Lynn «Кофеман»]

Код или пример на codepen покажите

[Артем]

Сейчас реализую

[Артем]

Lynn «Кофеман», https://codepen.io/asdasdsss/pen/dyWWXqp

После нажатия на кнопку Перезвоните мне

[Lynn «Кофеман»]

Когда вы убираете у html скролл (при появлении тени) то у него меняется ширина и фон, поскольку он расположен по центру, смещается что бы встать по новому центру.

[Артем]

Lynn «Кофеман», Очень признателен за время уделенное. Уже нашел решение! Иначе добиться паралакс эффекта. А то привязался к этому fixed

Answer 1

[TheOnlyFastCoder2]

Обычно фону задают position: absolute;

.background {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  img {
    width: 100vw;
    height: 100vh;
   }
}

<div class="background"> 
  <img src="https://avtovesti.com/wp-content/uploads/2016/06/ferrari-488-gtb-tuning-novitec-rosso-9.jpg" alt="">
</div>
<button>sdfsdfsdf</button>

Comments

[Артем]

Нужно чтобы при прокрутке скролла изображение двигалось вместе с ним

[TheOnlyFastCoder2]

Артем, поменяйте fixed вместо absolute. Посмотрите что будет . А лучше скиньте ссылку на свою верстку в codepen

[Артем]

TheOnlyFastCoder2, https://codepen.io/asdasdsss/pen/dyWWXqp

После нажатия на кнопку Перезвоните мне

[TheOnlyFastCoder2]

Артем, Артем, У меня все нормально отображается , но если вы не хотите делать parallax effect https://cyclemon.com/ , то рекомендую сделать фон статичным position: absolute;
, а для контента добавить оболочку со скролом или без .

<div class="container">
  <div class="container-wrapper">
    <!-- сюда контент -->
  </div>
  <div class="container-background"><img src="" alt=""></div>
</div>

[Артем]

TheOnlyFastCoder2, Возможно у вас во весь экран. Если увеличить длину страницы, то увидитею Да, хочу паралакс сделать. Благодарю сейчас попробую.

[Артем]

TheOnlyFastCoder2, НЕ получается так воплотить. Появляется скролл. Убираешь скролл картинка ниже границ. Обозначаешь границы нет паралакса. да и не получается его воплотить tranform. хз что делать. Пока штрудую инет

[Артем]

Разобрался. В итоге так и сделал. Только с css а с помощью js
Может кому пригодиться

$(window).scroll(function() {

    var st = $(this).scrollTop();

    $(".container").css({  /* это то что будем паралаксить */
        "transform" : "translate(0%, -" + st /10 + "%"
    });
});

[Артем]

Артем, Один хрен улетает бро. Не понимаю как это пофиксить

[TheOnlyFastCoder2]

Артем, дс скинь , если есть , потом удалишь сообщение

[Артем]

TheOnlyFastCoder2, Дс это что? могу на codepen воспроизвести сайт

[TheOnlyFastCoder2]

Артем, дс - эта программа для общения под названием дискорд(аналог skype) . Не хочется разбиратьсяя , я могу скинуть собственный пример на ванильном js (https://codepen.io/theonlyfastcoder2/pen/OJVJBYV) . Я не могу тут с вами переписываться , так как есть лимит по комментариям , потому что я здесь недавно зарегистрировался. Вы можете обращаться по почте(она закреплена на моем аккаунте ) , если вам так будет удобнее

[Артем]

TheOnlyFastCoder2, Да, бро дискорд есть) Никогда не называл его так просто) Благодарю за инфу по кол-ву сообщений
lltemall#7853 discord