Эффект наложения блока при скролле
Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.
Как сделать эффект наложения блока при скролле
Для реализации эффекта высота блока должна быть больше высоты экрана.
- Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
- Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/nalozhenie-bloka-pri-skrolle -->
<script>
$(function(){
/* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */
var id = '#rec320115509,#rec320115547,#rec320115573';
$('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: 0;}</style>');
$(window).on('load resize', function(){
$(id).each(function(){
var topPosition = $(window).height() - $(this).height();
if (topPosition < 0) {
$(this).css('top',topPosition)
} else {
$(this).css('top',0)
}
});
});
});
</script>Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!