jquery - 内容更新时跳转页面（从较长的内容到较短的内容）

问题描述

大家，我是一名平面设计师，我正在建立我的个人网站。当我加载比默认内容短的内容时，我遇到了 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>

标签： jquerycssscroll

jquery - 内容更新时跳转页面（从较长的内容到较短的内容）

问题描述

解决方案

推荐阅读