Липкий элемент с топ-обновлениями на основе прокрутки вызывает мерцание или встряхивание на свитке ⇐ Html

[Anonymous]

Я создаю эффект прокрутки, где .logo и .content elements внутри .container Блоки Блоки Использование: PATKY , а также получаю верхние Положение с использованием jQuery. Липкий прокрутка, где .logo < /code> и .content < /code> Сохраняйте идеально в синхронизации без визуального встряхивания или микроэпл. PrettyPrint-Override ">

Код: Выделить всё

// Auto-jquery-cache function
$C = (($) => {
let c = {};
return (s, f) => {
if (!c[s] || f) {
c[s] = $(s);
}
return c[s];
};
})($);
$(document).ready(function() {
const $diamond = $C('.diamond').find('.logo');
const $ruby = $C('.ruby').find('.logo');
const $emerald = $C('.emerald').find('.logo');

// Add the same cache for the content divs
const $diamondContent = $C('.diamond').find('.content');
const $rubyContent = $C('.ruby').find('.content');
const $emeraldContent = $C('.emerald').find('.content');

const diamondTop = $diamond.offset().top;
const diaRelTop = $diamond.position().top;
const rubyTop = $ruby.offset().top;
const emeraldTop = $emerald.offset().top;

// Initial position adjustment
$ruby.css('top', -rubyTop + diamondTop + diaRelTop);
$emerald.css('top', -emeraldTop + diamondTop + diaRelTop);

// Synchronize position for content elements
$rubyContent.css('top', -rubyTop + diamondTop + diaRelTop);
$emeraldContent.css('top', -emeraldTop + diamondTop + diaRelTop);

const handle = (e) => {
e.preventDefault();
const t = $(window).scrollTop();

// Update the position for both .logo and .content
$diamond.css('top', t + diamondTop);
$ruby.css('top', -rubyTop + $diamond.offset().top + diaRelTop);
$emerald.css('top', -emeraldTop + $diamond.offset().top + diaRelTop);

$diamondContent.css('top', t + diamondTop);
$rubyContent.css('top', -rubyTop + $diamond.offset().top + diaRelTop);
$emeraldContent.css('top', -emeraldTop + $diamond.offset().top + diaRelTop);
};

$(window).on('scroll', handle);
});< /code>
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html {
overflow-x: hidden;
}

body {
-webkit-text-size-adjust: none;
background: #fff;
}

.fixed {
position: fixed;
width: 100%;
text-align: center;
z-index: 10;
background: white;
}

.container {
height: 100dvh;
overflow: hidden;
position: relative;
}

.container .image-container img {
width: 100%;
height: auto;
object-fit: cover;
}

.container .logo {
position: relative;
/* top: 0%;
left: calc(50% - 440px); */
width: 500px;
height: 400px;
object-fit: cover;
}

.content {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;

/* top: 0%;
left: 40%;  */
}

@media screen and (max-width: 480px) {
.container .logo {
width: 250px;
margin-left: -125px;
}
}

.container.diamond {
background: #F0F8FF;
}

.container.ruby {
background: #DC143C;
}

.container.emerald {
background: #00FF7F;
}

.container .logo,
.container .content {
will-change: transform;
transition: transform 0.3s linear;
}

.sticky {
position: sticky;
top: 50px;
left: 50px;
z-index: 1;
}< /code>



[url=https://www.google.com/]

[img]https://images.unsplash.com/photo-1747134392051-5e112c58ce1e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8[/img]
                            alt="Image 1" class="image">
[/url]
[url=https://www.google.com/]

MAKERSPLACE 1
2022-2025
[View project]

[/url]




[url=https://www.youtube.com/]

[img]https://images.unsplash.com/photo-1750101272034-7becde7454dd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw4fHx8ZW58MHx8fHx8[/img]
                            alt="Image 1" class="image">
[/url]
[url=https://www.google.com/]

MAKERSPLACE 2
2022-2025
[View project]

[/url]




[url=https://www.linkedin.com/help/linkedin]

[img]https://images.unsplash.com/photo-1749984340771-c3a967db0a28?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyMHx8fGVufDB8fHx8fA%3D%3D[/img]
                            alt="Image 1" class="image">
[/url]
[url=https://www.google.com/]

MAKERSPLACE 3
2022-2025
[View project]

[/url]

code - https://codepen.io/rejuanul-islam/pen/wbvljwq

Подробнее здесь: https://stackoverflow.com/questions/796 ... ing-on-scr