Question

当页面从页面底部开始滚动时，我需要id = circle的div遵循svg路径，并且div圆始终位于屏幕的50％处。 svg将是div背景（或绝对位置），因为许多其他div将位于svg的上方。加载页面时，它们从底部开始（而不是从顶部）开始。我找到了这篇文章 Moving image on scroll through svg path，但我无法使其适应我的情况。这是我的页面：

.center {
    width:100%;
    text-align:center;
    background:#F3F3F3;
    position:relative;  
}

.wrap {
    position:relative:
    width:300px;
    height:300px;
}

svg {
    width: 1440px;
    height: 5219px;
    background:#FFF;
    margin:0 auto;
}

#circle {
    background: #000;
    border: 20px solid #CCC;
    width:10px;
    height:10px;
    border-radius:25px;
    position:absolute;
    z-index:10;
}

<div id="circle"></div>
<div class="center">
<svg viewBox="0 0 673 4757">
    <path d="M361.574 4757C361.574 4757 353.83 4548.88 368.12 4487.7C396.693 4365.36 474.035 4239.59 508.516 4168.84C586.103 4009.64 589.697 3817.99 508.516 3662.28C427.335 3506.57 46.9457 3159.34 46.9457 2781.32C46.9457 2403.31 673 1985.34 673 1553.3C673 1132.49 33.251 751.574 0 0" 
    stroke="#000" stroke-width="1" stroke-dasharray="6 5"  fill="none" id="path1"/>     
</svg>
</div>

Div元素在页面滚动时遵循svg路径

0 个答案: