Question

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

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

THE PLOBLEM 在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>

Answer 1

答案是添加head以下短语：

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

移动粘性块时文档自动滚动

1 个答案: