Question

我正在尝试重新创建在此网站上的about和work部分中看到的效果：http://www.melaniedaveid.com/

我希望能够向下滚动，一旦到达左边的div，只有右侧现在滚动。我假设两个都被包裹在一个div中，右边的div溢出滚动到，但我不确定如何将div锁定到位，直到到达底部。

任何帮助将不胜感激，谢谢！

Answer 1

您正在寻找的效果被称为＆＃34;粘性＆＃34; 基本上，你监听滚动事件并有条件地将css属性$requestFile = $request->files->get('image'); $em = $this->getDoctrine()->getManager(); $record = $em->getRepository('AppBundle:Post')->find($id); if (!$record) { throw $this->createNotFoundException( 'No product found for id '.$record ); } $record->setTitle($request->request->get('title')); $record->constructAlias($request->request->get('title')); ... if ($request->files->get('image')) { // check if image already exists $imgGeneratedId = sha1_file($request->files->get('image')->getPathName()); $imageRepo = $this->getDoctrine()->getRepository('AppBundle:Image'); $isPresent = $imageRepo->find($imgGeneratedId); $image = $isPresent; if (!$isPresent) { $image = new Image(); $image->setId($imgGeneratedId); $image->setLarge(file_get_contents($request->files->get('image')->getPathName())); $mediumImage = ... $em->persist($image); } $record->setImage($em->getReference('AppBundle:Image', $image->getId())); } $em->persist($record); $em->flush();设置为元素A - ＆gt;直到元素A的底部位置等于或大于元素B的底部位置

Answer 2

当问到这个问题时，CSS position: sticky已经是一个问题了，但是人们可能认为尝试实现你单独使用CSS所要求的东西会太麻烦。

然而，我已经花了最后一半和一小时的时间为你完成这个无聊的无聊。我们走了。

现在，代码本身有点长，所以我把它放在下面的折叠片段中。或者，它也在此JSFiddle上，因此您可以保存链接以供日后使用。

我使用的结构如下：

<section>

    <article>
        <!-- Left side -->
        <aside>
            <!-- left-side content goes here -->
        </aside>

        <!-- Right side -->
        <figure></figure>
        <!-- (one or more <figure> tags) -->

    </article>
    <!-- (one or more <article> tags) -->

</section>

以section作为父级，每个article的行为与您所描述的一样（固定在左侧，直到所有图像都在右侧滚动）。

在article内，我们有一个aside标签，其中包含左侧（固定侧）显示的所有内容。

此aside标记包含position: sticky和top: 0，用于指定在article的每个子项滚动之前，它应保持距离顶部0像素页。

每个figure标记是一个图像（或者，如果您愿意，内容填充元素），应该在左侧开始移动之前滚动。

运行代码段时更容易理解：

＆＃13;

* {
    margin: 0;
    border: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

html, body, section, article, aside {
    min-height: 100%;
}

article > aside {
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
}

figure {
    margin-left: 50%;
    height: 100vh;
}
figure:first-of-type {
    margin-top: -100vh;
}


/* * * * * * * * * * * * * * * * * * * * * * *\
|* Coloring and styling so things look cute  *|
\* * * * * * * * * * * * * * * * * * * * * * */
article > aside {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

article:nth-of-type(1) > aside {  background-color: #3c3;  }
article:nth-of-type(2) > aside {  background-color: #c33;  }

figure {
    background-image: url(http://via.placeholder.com/500x500);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #444;
}

h1 {
    font-size: 30px;
    font-family: sans-serif;
    font-weight: normal;
    font-style: italic;
}
p {
    font-size: 18px;
}
hr {
    width: 50%;
    background-color: #fff;
    margin: 30px;
    height: 1px;
}

.spacing {
    margin: 30px auto;
    padding: 30px;
    line-height: 1.5;
    max-width: 500px;
}
.spacing:first-letter {
    line-height: 1;
    font-size: 30px;
    font-weight: bold;
}

＆＃13;

<header class="spacing">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
<section>
    <article>
        <aside>
            <h1> Section I </h1>
            <hr>
            <p> Your content goes here </p>
        </aside>
        <figure></figure>
        <figure></figure>
        <figure></figure>
    </article>
    <article>
        <aside>
            <h1> Section II </h1>
            <hr>
            <p> Your other content goes here </p>
        </aside>
        <figure></figure>
        <figure></figure>
        <figure></figure>
        <figure></figure>
        <figure></figure>
    </article>
</section>
<footer class="spacing">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</footer>

＆＃13;

上升空间

它完全符合您的要求;
它不使用任何JavaScript，这会使事情变得更快;
我认为这很棒，我的妈妈也同意。

缺点

它可能仅在section打算占据整个页面时才有效，即当它占据页面高度的100％时。我依赖于vh单位（说实话，因为我无法找到一种只使用百分比的好方法）并且总是会引用整页大小，即使是父元素也是如此。 section较小。不过，请参阅上行＃1，因为这是我保留它的主要原因。
浏览器支持™：
- 视口单元vh：Internet Explorer 9+
- position: sticky：Edge 16+, Chrome 56+（Internet Explorer上不支持）
您的问题有jquery标记，暗示我的所有努力都毫无意义。也许有些旁观者会发现它很有用。

我不是很擅长结论，但它很有趣。我希望这可以帮助你或其他人。干杯！

左div是静态而右div是滚动

2 个答案:

上升空间

缺点