内容更新时跳页（从较长的内容到较短的内容）答案

【问题标题】：Page skips when the content updates (from a longer content to a shorter content)内容更新时跳页（从较长的内容到较短的内容）
【发布时间】：2020-03-20 03:44:28
【问题描述】：

大家，我是一名平面设计师，我正在建立我的个人网站。当我加载比默认内容短的内容时，我遇到了 window scrollTop 的问题。

好吧，这里有一些细节：

该页面是一个简单的单列页面，访问者将向下滚动页面以查看项目。每个项目都包含一个标题，其 css 位置为position: sticky，默认显示为图片。在标题中，有一个名为“文本”的按钮。

当点击按钮时，容器<contentProjet>的内容将在图像和文本之间切换。也就是说，默认显示的项目图像将被项目文本替换，反之亦然。到目前为止，一切都很好。

但是如果你不在项目的顶部，假设你已经滚动了一段时间 ($(.contentProject).scrollTop!=0)，当你点击 stiky 按钮显示文本时，就会出现问题：当<contentProjet> 的内容从图像变为文本（长度更短）时，clientHeight 部分显示的页面会跳过。这是演示问题的代码。感谢您的建议和帮助！

function AjaxSwitchProjet(){
$('.button').on('click', function(){
    var el = $(this)
    el.text() == el.data('text-note')
    ? (
      el.text(el.data('text-image')),
      target = el.data('target-note'),
       el.parent().next().find('.d-none').fadeIn(1000).css('display', 'block'),
       el.parent().next().find('.carousel').fadeOut(1000)
      )
    : (
      el.text(el.data('text-note')),
      target = el.data('target-image'),
       el.parent().next().find('.d-none').fadeOut(1000),
       el.parent().next().find('.carousel').fadeIn(1000)
    )
  // el.parent().next().hide().load(target + '.php', function(){
  // }).fadeIn(1000);
   
    
   return false;
});
}
AjaxSwitchProjet();


// add position sticky to titles

.text {
  position:sticky;
  top:0;
  line-height:2px;
  padding:2px;
}

h3 {
font-size:24px;
}

#first{
background-color : red;
}

#seconde{
background-color:blue
}

.d-none{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

    <article>
              <div id="firstProject">
                  <div class="text" id='first'>
                     <h3 data-projet="firstProject">
                         title of firstProject
                     </h3>
                     <div class="button" 
                       data-text-image="image"
                       data-text-note="text" 
                       data-target-note="noteFirstProject"
                       data-target-image='imgFirstProject'>
                         text
                     </div>
                 </div>
                 <div class="contentProject">
                    <div class="carousel">
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                      </div>           
                      <div class='d-none'>
                        <p>
      Bacon ipsum dolor amet bresaola burgdoggen kielbasa pancetta chuck hamburger cupim shank meatloaf sirloin biltong leberkas jerky shankle. Prosciutto drumstick bresaola, pork ham capicola cow swine landjaeger sirloin cupim tenderloin tail pork chop chuck. 
                        </p>         
                      </div>
                     </div>
              </div>
    </article>


         <article>
              <div id="secondeProject">
                  <div class="text" id='seconde'>
                     <h3 data-projet="secondeProject">
                         title of secondeProject
                     </h3>
                     <div class="button" 
                       data-text-image="image"
                       data-text-note="text" 
                       data-target-note="noteSecondeProject"
                       data-target-image='imgSecondeProject'>
                          text
                     </div>
                </div>
                <div class="contentProject">
                
                                      <div class="carousel">
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                           <figure><img src="http://placehold.jp/369x639.png"></figure>
                      </div>
                      
                      <div class='d-none'>
                        <p>
      Bacon ipsum dolor amet bresaola burgdoggen kielbasa pancetta chuck hamburger cupim shank meatloaf sirloin biltong leberkas jerky shankle. Prosciutto drumstick bresaola, pork ham capicola cow swine landjaeger sirloin cupim tenderloin tail pork chop chuck. 
                        </p>         
                      </div>
                </div>
             </div>
    </article>
</body>

【问题讨论】：

标签： jquery css scroll

【解决方案1】：

由于您要替换内容，文档长度（以像素为单位）会发生变化，并且视口会适应变化。那是你无法改变的。如果您改为将文本作为叠加层放置，则高度将保持不变。

【讨论】：

感谢您的帮助，您的意思是我可以将文本作为图像的叠加层？你能给我更多的提示吗？
如果是这样，恐怕这不是我正在寻找的解决方案。
抱歉，是的，将文本放置在容器中，要么完全放在不透明的图像上，要么放在图像旁边。可以作为标题粘贴。
您可以在用文本替换图像之前冻结元素高度。但这会在文本下方留出大量空间。
感谢您的提示。是的，我也想到了冻结高度的想法，但我认为这对用户体验不太友好否则，我尝试对滚动位置进行一些数学运算，没有运气