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

Question

我是 jQuery 的初学者。由于愿意开发一个移动网站，我想实现粘性 header 以增强用户体验。

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

HTML:

<div class="fixed-header">
    <div class="header_item" id="head_a"><a href="#a"> A </a></div>
    <div class="header_item" id="head_b"><a href="#b">  B </a></div>  
    <div class="header_item" id="head_c"><a href="#c">  C </a></div>
    <div class="header_item" id="head_d"><a href="#d">  D </a></div>
    <div class="header_item" id="head_e"><a href="#e">  E </a></div>
</div>

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"));
});

Answer 1

抱歉回答晚了。我创建了一个新的 javascript 来实现这个功能。

代码:

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);
};

可能是解决这种情况的一些更好的解决方案，谢谢大家。