产品页面 - 分屏滚动答案

【问题标题】：Product Page - Split Screen Scrolling产品页面 - 分屏滚动
【发布时间】：2019-01-30 22:10:14
【问题描述】：

http://looker-theme.myshopify.com/collections/furniture/products/uchiva 我真的很喜欢上面链接中的滚动效果，并希望将其合并到我使用“Debut”主题的网站中。目标是让产品页面的左侧滚动而右侧保持固定。以前有没有人使用 Debut 主题做过类似的事情？如果是这样，你是怎么做的？谢谢！

位置：固定

【问题讨论】：

标签： html css shopify liquid

【解决方案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
  }
}

你可以从那开始。

【讨论】：