javascript - 具有动态内容问题的 JQuery 粘性 header

Question

这几天一直在纠结这个问题。以为我尝试了一切。希望我能从某人那里得到一些安慰。

如果内容是静态的，则粘性 header 有效。当另一个类别在 View 中时，标题滚动显示和 View 滚动。当 HTML 中存在使用 JQuery 加载的动态数据时，就会出现问题。那时，粘性标题仍然使用以前标题的旧位置并显示粘性标题。

因此，自上一类别展开后，粘性标题不会在类别的新位置显示，而是显示在旧位置，就好像该类别未展开一样，从而产生了不良效果。

认为解决方案很简单，只需识别和捕获 followmebar 类的新位置并正确显示粘性标题即可。

预先感谢您的协助。

我有使用 JQuery 代码的粘性 header :

var stickyHeaders =  function() {

                     console.log("enter stickyHeaders")

      var $window = $(window),
          $stickies;

      var load = function(stickies) {

        console.log("enter stickies")



            //});

        if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

          $stickies = stickies.each(function() {

            //console.log(stickies);

            var $thisSticky = $(this).wrap('<div class="followWrap" />');


            $thisSticky
                .data('originalPosition', $thisSticky.offset().top)
                .data('originalHeight', $thisSticky.outerHeight())
                  .parent()
                  .height($thisSticky.outerHeight());   


          });




        }

         $window.off("scroll.stickies").on("scroll.stickies", function() {

              _whenScrolling();     
          });
      };

      var _whenScrolling = function() {

        console.log("enter _whenScrolling")

        $stickies.each(function(i) {            

          var $thisSticky = $(this),
              $stickyPosition = $thisSticky.data('originalPosition');

          if ($stickyPosition <= $window.scrollTop()) {        

            var $nextSticky = $stickies.eq(i + 1),
                $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');

            $thisSticky.addClass("fixed").addClass('show-followMeBar').removeClass('hide-followMeBar');

            if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {

              $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
            }

          } else {

            var $prevSticky = $stickies.eq(i - 1);

            $thisSticky.removeClass("fixed").addClass('hide-followMeBar').removeClass('show-followMeBar');

            if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {

              $prevSticky.removeClass("absolute").removeAttr("style");
            }
          }
        });
      };

      return {
        load: load
      };

    }();

    $(function() {


                stickyHeaders.load($(".followMeBar"));  




    });

和 CSS:

.show-followMeBar{
            display: block;

        }
        .hide-followMeBar{
            display: none;

        }
        .followMeBar {
  background: #ffffff;
  padding: 20px 0px 0px 20px;
  position: relative;
  z-index: -999;
  /*color: #fff*/;
  font-weight: bold;
  font-size: 16px;
  margin-left: -20px;
  margin-right: -20px;
}
.followMeBar.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}
.followMeBar.fixed.absolute {
  position: absolute;
}

和 HTML:

  <div class="followMeBar">
                              One
   </div>

   <div class=" slider single-item division" id="d1">   

    <div class="slick-active">  

        <span class="">One | 13/14</span>
    </div>

    <!--Dynamic Content goes here-->
</div>

<div class="followMeBar">
                        Two
</div>

<div class=" slider single-item division" id="d1">  

    <div class="slick-active">  

        <span class="">Two | 13/14</span>
    </div>

    <!--Dynamic Content goes here-->
</div>

Answer 1

$('.followMeBar').css('transform','none');
$('.followMeBar').removeData( "originalPosition" );
$('.followMeBar').removeData( "originalHeight" );
$(window).scrollTop(0);
stickyHeaders.load($(".followMeBar"));