Question

我正在寻找一种非jquery解决方案来为我的移动网站添加持久的页脚叠加层。它类似于位于内容之上但固定在页面底部的弹出广告。

我一直在使用javascript方法：

window.addEventListener(
    'scroll',
    function() {
        //if scrolled and offsets are the same (iphone)
        if(_self.initOffsetY == window.pageYOffset)
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight+"px";
        }
        else
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight - window.pageYOffset+"px"; 
        }
    },
    false
);

其中initPage Height是初始页面高度，initOffsetY是页面的初始偏移量。这将通过浏览器菜单栏来处理这种情况。

但它在android上并没有真正起作用。定位已关闭。有人可以解释原因吗？感谢

Answer 1

您应该使用以下任一独立滚动助手： http://joehewitt.github.com/scrollability/ 或http://cubiq.org/iscroll

Answer 2

拥有两个单独的元素（主包装器和页脚div）并不是更好，并且只允许在包装器中滚动（overflow:auto;）？这样可以避免大多数浏览器的不一致，甚至可以避免关闭JS的情况。

但是有一个缺点。您需要为某些移动设备编写滚动内部元素的方法。有这样的库（喘气！），但坦率地说，自己编程并不太难（就像我对我的网站所做的那样）。

Answer 3

如果您依赖这种方法将元素浮动到您想要的位置/近似位置：已修复，那么您将需要检查一些内容，其中一个是您需要的HTML代码＆＃ 39;必须确保没有任何边距或填充干扰上述脚本。快速破解解决方案是仅测量高度差并根据其校准脚本。从校准中获得的数字可能有助于确定问题的根源。可能有一些额外的技巧可以使这项工作顺利进行，但我会选择已经使用过的库，看起来有很多这样的库：http://bradfrostweb.com/blog/mobile/fixed-position/

顺便说一句 - iscroll4库将修复dump的滚动问题：auto on ios＆lt; 5，android＆lt; 4

移动浏览器持久页脚（非jquery）

3 个答案: