Question

http://looker-theme.myshopify.com/collections/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
  }
}

您可以从此开始。

产品页面-分屏滚动

1 个答案: