Страница продукта - разделенная прокрутка экрана

Question

http://looker -theme.myshopify.com / collection / furniture / products / uchiva Мне очень нравится эффект прокрутки по ссылке выше, и я хочу включить его в мой сайт, использующий «Дебют»тема.Цель состоит в том, чтобы иметь левую сторону прокрутки страницы продукта, в то время как правая сторона остается фиксированной.Кто-нибудь делал что-то подобное, используя тему Debut раньше?Если да, то как ты это сделал?Спасибо!

Позиция: исправлено

Answer 1

Я написал какой-то код для вас

<div class="content">
    <div class="scroll">
        <img src="">//Put some image inside src</img>
    </div>
    <div class="fixed">
        <img src="">//Something too</img>
   </div>
</div>

css:

    .content{
        width: 100%;
        height: 100%;
    }

    .fixed{
        width: 50%;
        height: 100%;
        position: fixed;
        top: 0px;
        right: 0px;
    }

    .fixed img{
        width: 100%;
        height: 100%;
    }

    .scroll{
        width: 50%;
    }

    .scroll img{
        width: 100%;
    }

В этом случае я использовал изображения, но вы можете поместить в div все, что захотите.

если вы хотите сделать его более отзывчивым и интересным, вы должны добавить немного javascript, чтобы вы могли контролировать, когда контейнер перестает быть исправленным, вы можете добиться этого, выполнив:

window.onscroll = function (){
 var element = document.getElementById('YOUR ELEMENT ID'); // The fixed element in this case

  if(window.pageYOffset > 1000 ){ // YOU DECIDE WHEN. window.pageYOffset says to you where the scroll is in pixels looking at the Y axis
    element.classList.add('CLASS'); //Create a class that eliminates the position fixed with something like position: unset
  } else {
    element.classList.remove('CLASS'); //REMOVING THE CLASS SO IT WILL BE FIXED AGAIN
  }
}

Вы можете начать стот.