CSS Position Sticky: Стимучный переход при прокрутке, чтобы частично скрыть баннер ⇐ CSS

[Anonymous]

Вот урезанная версия того, над чем я работал через Codepen: https://codepen.io/moosearch/pen/eaxyjepобразно Два макета столбца в соответствии с этим изображением: https://imgur.com/a/bj1twck
Левый столбец - боковая панель меню; Правый столбец содержит основной контент. Основной блок контента имеет горизонтальный баннер, который будет представлять брендинг для Департамента, в котором я работаю. Баннер состоит из двух SVG; Один из них - горизонтально полосатый фон, а другой - логотип, расположенный на фоне SVG. Если пользователь прокручивается вниз, баннер будет частично скрываться - отображается только нижняя часть, и логотип исчезает. Если пользователь прокручивает обратно, он полностью покажет баннер. Два движения, в отличие от одного плавного движения. Моя реализация в противном случае удовлетворительная, если это не было для этого.

























< /code>
css: < /p>
/* Note: I also use bootstrap.css styling, v5.3.3 */

body {
font-family: "Roboto";
display: flex;
flex-direction: row;
height: 100vh;
}

main {
height: 100vh;
flex-grow: 1;
overflow-y: auto;
padding: 10px 10px 10px 10px;
}

/* For banner */

#banner-wrapper {
position: sticky;
top: 0;
z-index: 10;
margin: -8px -10px 30px -10px;
height: 130px;
overflow: hidden;
transition: all 0.5s ease-out;
}

.banner svg {
height: 130px;
top: 0px;
}

/* Positions the crest within the banner BG. */
.crestbg svg {
height: 130px;
position: absolute;
top: 0px;
right: 40px;
}

.banner a {
text-decoration: none;
}

/* CSS for hiding banner partially when scrolling */

header {
height: 80px;
transition: all 0.5s ease-out;
}

header.scrolled {
height: 50px;
}
#banner-wrapper.scrolled {
top: -80px;
}
#crest-container.scrolled {
display: none;
}
< /code>
js: < /p>
// For banner scrolling.
const mainContentEle = document.getElementById('main-content-block')

mainContentEle.addEventListener('scroll', () => {
// Dependent on the SG banner dimensions and how it's designed. Change this as needed.
const scrollPixelCutoffValue = 80;

const headerElement = document.querySelector('header')
const svgBannerContainer = document.getElementById('banner-wrapper')
const crestContainer = document.getElementById('crest-container')
if (mainContentEle.scrollTop > scrollPixelCutoffValue) { // Adjust this value as needed
svgBannerContainer.classList.add('scrolled');
headerElement.classList.add('scrolled');
crestContainer.classList.add('scrolled');
} else {
svgBannerContainer.classList.remove('scrolled');
headerElement.classList.remove('scrolled');
crestContainer.classList.remove('scrolled');
}
return;
});


Подробнее здесь: https://stackoverflow.com/questions/794 ... ide-banner