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

Question

关闭。这个问题需要debugging details .它目前不接受答案。












编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将帮助其他人回答问题。


2年前关闭。







Improve this question




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

Answer 1

正如您所评论的，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>