javascript - 移动粘性 block 时文档自行滚动

Question

我的网站上有一个粘 block 。它有 3 个条件:

• 默认这个 block 在header，静态位置
• 当视口(viewport)的 bootom 到达 block 的顶部时，它会变粘(始终停留在屏幕底部)
• 当视口(viewport)的 bootom 到达页脚的顶部时， block 变为静态，但它插入在页脚之前

问题 在 Android 上，Chrome 功能无法正常工作:当 block 固定在页脚之前(我们滚动到文档的底部)时，我们滚动到顶部( block 变得粘滞)并且文档滚动到文档的中间(whaaat)。就像它相对于 main block 中的某些 block 定位。为什么会这样？在 PC chrome 上，一切似乎都很好。

代码(buttonsBlock 是粘性的):

var buttonsPrimaryPosition = $(".buttons-320").offset().top; //position of block on load

  function makeButtonsSticky() {

      var buttonsBlock = $(".buttons-320");
      var buttonsPosition = buttonsBlock.offset().top + 75; // bottom side of the block position, 75 height of the block
      var totalHeight = $(window).scrollTop() + $(window).height(); //bottom side of the viewport coordinate
      var footerTop = $(document).height() - $(".footer").height(); //top side of footer coordinate


        if ( totalHeight >= buttonsPrimaryPosition + 75 && totalHeight < warrantyTop ) {
          buttonsBlock.appendTo($(".header"));
          buttonsBlock.addClass("buttons-320-fixed");
          buttonsBlock.removeClass("buttons-320-bottom");    
        } else if ( totalHeight >= footerTop ) {
          $(".footer").before(buttonsBlock);
          buttonsBlock.removeClass("buttons-320-fixed");
          buttonsBlock.addClass("buttons-320-bottom");
        } else {
          buttonsBlock.appendTo($(".header"));
          buttonsBlock.removeClass("buttons-320-fixed");
          buttonsBlock.removeClass("buttons-320-bottom");

        };
  };

  $(window).scroll(function() {
    makeButtonsSticky();
  });

CSS

.buttons-320 {
    background: #2693c5 url('img/buttons-border.png') no-repeat center;
    margin-top: 25px;
  }
  .buttons-320-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 150;
  }
  .buttons-320-bottom {
    margin-top: 0;
  }

HTML

<header class="header">
  <div class="button-320"><>
</header >
<main></main>
<footer></footer>

Answer 1

答案是在 head 中添加以下短语:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">