Javascript 向下滚动网页时显示多个粘性标题

我是jQuery的初学者。由于愿意开发一个移动网站，我想实施粘性头，以提高用户体验

这里有一些我的工作代码，但它似乎不作为“顶部”的计算工作

HTML:

javascript和jQuery：

var $totalImageHeight;

$(window).on("load", function() { //Fires when DOM is loaded
    getImageSizes();
    $(window).resize(function() { //Fires when window is resized
        getImageSizes();
    });
});

function getImageSizes() {
    $(".insurance_item img").each(function(count) {
         var $this = $(this);
         $imageHeight = $this.height();
         $totalImageHeight = $imageHeight * (count + 1);
    });
} 

var stickyHeaders = (function() {

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

  var load = function(stickies) {
     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
        $stickies = stickies.each(function() {

         var $thisSticky = $(this).wrap('<div class="followWrap" style="height: 0;"/>');
         $thisSticky
            .data('originalPosition', $thisSticky.offset().top)
            .data('originalHeight', $thisSticky.outerHeight( 75 ))
            .parent().height($thisSticky.outerHeight( 75 ));    
      });

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

  var _whenScrolling = function() { 
      $stickies.each(function(i) {          

         var $thisSticky = $(this),
             $stickyPosition = $thisSticky.data('originalPosition');
             if ($stickyPosition <= $window.scrollTop()) {   
                 var $nextSticky = $stickies.eq(i + 1);
                 $nextStickyPosition = $totalImageHeight - $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
                 $thisSticky.addClass("fixed").css("top", $nextStickyPosition);

             if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {               
                 $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
             }

          }else{ //scroll up and disable the fixed header
              var $prevSticky = $stickies.eq(i - 1);

              $thisSticky.removeClass("fixed");

           if($prevSticky.length>0&&$window.scrollTop()<=                  

           $thisSticky.data('originalPosition') - 
      $thisSticky.data('originalHeight')){


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

return {
   load: load
};
})();

$(function() {
  stickyHeaders.load($(".header_item"));
});

var$totalImageHeight；
$（窗口）。在（“加载”上，加载DOM时激发函数（）
getImageSizes（）；
$（窗口）.resize（函数（）{//在调整窗口大小时激发
getImageSizes（）；
});
});
函数getImageSizes（）{
美元（“.insurance\u item img”）。每个（功能（计数）{
var$this=$（this）；
$imageHeight=$this.height（）；
$totalImageHeight=$imageHeight*（计数+1）；
});
} 
var stickyHeaders=（函数（）{
变量$window=$（window），
$stickies；
var负载=功能（胶粘物）{
if（typeof stickies===“object”&&stickies实例jQuery&&stickies.length>0）{
$stickies=stickies.each（函数（）{
var$thisticky=$（this.wrap（“”）；
$thisticky
.data（'originalPosition'，$thisticky.offset（）.top）
.data（'originalHeight'，$thisticky.outerHeight（75））
.parent（）.height（$thiststicky.outerHeight（75））；
});
$window.off（“scroll.stickies”）.on（“scroll.stickies”，function（））{
_当滚动时（）；
});
}
};
var_whenScrolling=function（）{
$stickies.每个（函数（i）{
变量$thisticky=$（此），
$stickyPosition=$ThistSticky.data（'originalPosition'）；
如果（$stickyPosition 0&&$ThistSticky.offset（）.top>=$nextStickyPosition）{
$thiststicky.addClass（“绝对”）.css（“顶部”，$nextStickyPosition）；
}
}否则{//向上滚动并禁用固定标题
var$prevstick=$stickies.eq（i-1）；
$thisticky.removeClass（“固定”）；
如果（$prevSticky.length>0&&$window.scrollTop（）很抱歉回答得太晚。我创建了一个新的javascript来实现这个函数

代码：

var$window=$（window）；
var imageArr=[]；
var iOS=！！navigator.platform&/iPad | iPhone | iPod/.test（navigator.platform）；
控制台日志（iOS）；
$（窗口）。在（“加载”上，加载DOM时激发函数（）
getImageSizes（）；
window.requestAnimationFrame（勾选）；
$（窗口）.resize（函数（）{//在调整窗口大小时激发
getImageSizes（）；
滚动检测（imageArr）；
});
});
函数getImageSizes（）{//获取图像的数量及其外观
var$项目=$（“.insurance_item”）；
对于（变量c=0；c<$items.length；c++）{
imageArr[c]=$（$items[c]）.outerHeight（）；
}
}
函数scrollDetect（imageArr）{//在图像脱离屏幕后显示图像的标题标题。
变量$items=$（'.header_item'）；
对于（var c=0；c=（imageArr[c]*（c+1））-$（“#固定头”）.outerHeight（）{
$items.eq（c.show（）；
}否则{
$items.eq（c.hide（）；
}
}
window.requestAnimationFrame（勾号）；//防止帧丢失并进行错误计算
}
函数tick（）{
滚动检测（imageArr）；
};

可能是解决此问题的更好解决方案，谢谢大家。
可能是$nextStickyPosition的计算错误，或者$totalImageHeight在滚动时无法传递给函数。我在上周一解决了。我将稍后发布。
var $totalImageHeight;

$(window).on("load", function() { //Fires when DOM is loaded
    getImageSizes();
    $(window).resize(function() { //Fires when window is resized
        getImageSizes();
    });
});

function getImageSizes() {
    $(".insurance_item img").each(function(count) {
         var $this = $(this);
         $imageHeight = $this.height();
         $totalImageHeight = $imageHeight * (count + 1);
    });
} 

var stickyHeaders = (function() {

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

  var load = function(stickies) {
     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
        $stickies = stickies.each(function() {

         var $thisSticky = $(this).wrap('<div class="followWrap" style="height: 0;"/>');
         $thisSticky
            .data('originalPosition', $thisSticky.offset().top)
            .data('originalHeight', $thisSticky.outerHeight( 75 ))
            .parent().height($thisSticky.outerHeight( 75 ));    
      });

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

  var _whenScrolling = function() { 
      $stickies.each(function(i) {          

         var $thisSticky = $(this),
             $stickyPosition = $thisSticky.data('originalPosition');
             if ($stickyPosition <= $window.scrollTop()) {   
                 var $nextSticky = $stickies.eq(i + 1);
                 $nextStickyPosition = $totalImageHeight - $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
                 $thisSticky.addClass("fixed").css("top", $nextStickyPosition);

             if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {               
                 $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
             }

          }else{ //scroll up and disable the fixed header
              var $prevSticky = $stickies.eq(i - 1);

              $thisSticky.removeClass("fixed");

           if($prevSticky.length>0&&$window.scrollTop()<=                  

           $thisSticky.data('originalPosition') - 
      $thisSticky.data('originalHeight')){


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

return {
   load: load
};
})();

$(function() {
  stickyHeaders.load($(".header_item"));
});

var $window = $(window);
var imageArr = [];
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
console.log(iOS);

$(window).on("load", function() { //Fires when DOM is loaded
    getImageSizes();
    window.requestAnimationFrame(tick);
    $(window).resize(function() { //Fires when window is resized
        getImageSizes();
        scrollDetect(imageArr);
    });
});

function getImageSizes() { //get the numbers of images and its outerHeight
    var $items = $(".insurance_item");
    for(var c = 0; c < $items.length; c++){
        imageArr[c] = $($items[c]).outerHeight();  
    }
}

function scrollDetect(imageArr){   //show the title header of image once the image is offscreen.
    var $items = $('.header_item');
    for(var c = 0; c < imageArr.length; c++){
        if($window.scrollTop()  >= (imageArr[c] * (c+1)) - $('#fixed-header').outerHeight()){  
            $items.eq(c).show();
        }else{
            $items.eq(c).hide();
        }
    }
    window.requestAnimationFrame(tick); //prevent the frame lost and make a incorrect calculation
}

function tick(){
    scrollDetect(imageArr);
};