移动粘性块时文档自行滚动答案

【问题标题】：Document scrolling by itself when moving sticky block移动粘性块时文档自行滚动
【发布时间】：2015-06-25 22:33:10
【问题描述】：

我的网站上有一个粘性块。它有3个条件：

默认情况下，此块在标题中，静态位置
当视口的底部到达块的顶部时，它会变得粘滞（始终停留在屏幕底部）
当视口的 bootom 到达页脚的顶部时，块变为静态，但它被插入到页脚之前

问题在 Android 上，Chrome 功能无法正常工作：当块固定在页脚之前（我们滚动到文档底部）我们滚动到顶部（块变得粘滞）并且文档滚动到文档中间（whaaat）。就像它相对于main 块中的某些块定位一样。为什么会这样？在 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>

【问题讨论】：

那个代码看起来很奇怪。 footer 和 header 类是什么？当用户滚动并且整个页面小于warrantyTop时，按钮面板是否应该贴在顶部，而当页脚在屏幕上时，按钮面板是否应该贴在底部？

标签： javascript jquery html css

【解决方案1】：

答案是在head 后面加上以下短语：

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

【讨论】：