наложение блоков сайте в html

Question

в данном коде происходит наложение блоков снизу вверх, нужно исправить на наложение справа налево

<script>

$(function(){
    /* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */
    var id = '#rec738229527,#rec719732182,#rec719732360,#rec738211112,#rec719735134';

    $('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>

Answer 1

Замените top:0 на left:0 во внедренном CSS, чтобы блоки прилипали к левой стороне окна. (подумайте о том, чтобы добавить right:auto, чтобы блоки не прилипали к правой стороне.

Измените логику позиционирования - вместо того, чтобы вычислять topPosition, вычислите leftPosition, используя ширину окна и ширину блока.

 $('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; left: 0; right: auto; z-index: 0;}</style>');

 $(window).on('load resize', function(){
     $(id).each(function(){
         var leftPosition = $(window).width() - $(this).width();
         if (leftPosition < 0) {
             $(this).css('left', leftPosition);
         } else {
             $(this).css('left', 0);
         }
     });
 });

БЛОГ НА HUSL

наложение блоков сайте в html

Ответы (1 шт):