javascript - 如何使用Jquery将图像设置为固定位置并将内容移动到可滚动的右侧？

Closed. This question needs debugging details。它当前不接受答案。












想改善这个问题吗？更新问题，以便将其作为on-topic用于堆栈溢出。

在4个月前关闭。



Improve this question




在这里，我正在尝试将图像设置为固定位置，并使用Jquery将内容移至其可滚动的右侧，目前它无法正常工作。
他们有什么办法使它起作用吗？

最佳答案

正如您所评论的那样，jQuery不是强制性的，因此这是CSS解决方案，不需要jQueryposition: sticky是您的 friend 在这里。
检查更新的codePen here.
或查看下面的代码段。

.phase1_main {width: 100%;display: inline-block;position:relative;}
img {width: auto;max-width: 100%;height: auto;}
#sticky {padding: 0.5ex;}
#sticky.stick {position: fixed;top: 0;z-index: 10000;}
.phase1_inner {position: absolute;top: 0;z-index: 1;width: 8px;height: 100%;background-color: #f1f1f1;}
.progress-container {height: 100%;width: 8px;background: #ccc;}
.progress-bar {width: 8px;background: #4caf50;height: 0%;}
.content {padding: 100px 0;margin: 50px auto 0 auto;width: 80%;}
.phase1_lgt, .phase1_rgt {float: left;width: 50%;}
.phase1_rgt {float: right;position: relative;}
.img42 {width: 100%;display: inline-block;}
.as.active {opacity: 1;}
.as {font-size: 50px;line-height: normal;padding: 50px;opacity: 0.2;}
.phase1_lgt {position: sticky; top:0;}

<div class="phase1_main">
  <div class="phase1_lgt">
    <div id="sticky-anchor"></div>
    <div id="sticky">
      <img class="img-fluida" src="https://cdn.shopify.com/s/files/1/0054/3978/3001/files/lady_hair1_600x.jpg">
    </div>
  </div>
  <div class="phase1_rgt">
    <h2>Healthy hair begins at the scalp</h2>
    <p>We believe wellness takes time, and it applies to your scalp and hair.</p>
    <div class="phase1_inner">
      <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
    <div class="tab_content">
      <div class="as">
        <small>Phase 1</small>
        <span>Removal</span>
        <p>+ Sebum and build up removal</p>
        <p>+ Itchiness starts to lessen</p>
      </div>
      <div class="as">
        <small>Phase 2</small>
        <span>Nourishment</span>
        <p>+ Scalp inflammation reduced</p>
        <p>+ Deeper absorption of nutrients</p>
        <p>+ Hair adjusts to absence of silicones, some flatness may occur</p>
      </div>
      <div class="as">
        <small>Phase 3</small>
        <span>Adaption</span>
        <p>+ Hair adjusts to essential oils and natural ingredients</p>
        <p>+ Hair gains additional shine from natural sources, no longer silicones</p>
        <p>+ Scalp inflammation and flakiness has significantly reduced</p>
      </div>
    </div>
  </div>
</div>