移動粘性塊時自動滾動文檔

我的網站上有一個粘性塊。它有3個條件：移動粘性塊時自動滾動文檔

默認該塊是在報頭，靜態位置
當視口的bootom達到它變得發粘的塊的頂部側（總是停留在屏幕的底部）
當視口bootom到達塊變爲靜態頁腳的頂側上，但它是頁腳之前插入

THE PLOBLEM 在Android鉻功能錯誤地工作：WH在頁腳之前（我們滾動到文檔底部）固定塊，我們滾動到頂部（塊變粘），文檔滾動到文檔的中間（whaaat）。它就像它在main區塊中的某些區塊的位置。爲什麼會發生？在個人電腦鉻一切似乎很好。

代碼（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>

來源

2015-06-25 Maryja Piaredryj

該代碼看起來很奇怪。什麼是「footer」和「header」類？當用戶滾動時以及整個頁面小於「warrantyTop」時，按鈕面板是否應該貼在頂部，並且當頁腳在屏幕上時，是否貼在底部？ – cyberj0g

答案是增加head以下短語：

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

來源

2015-07-17 11:30:40

移動粘性塊時自動滾動文檔

回答

相關問題