关于 javascript:css / jquery – 需要不使用 position:fixed 的持久页脚

css / jquery - need persistent footer without using position:fixed

我正在编写一个移动网站，我希望将一个元素固定在屏幕上的某个位置，并在用户向下滚动页面时保持在那里。据我所知，我不能使用 position:fixed ，因为 iPhone 不支持它。我将如何做到这一点？我不想使用 jquery mobile。

相关讨论

您可能想使用 jquery mobile，特别是查看"持久页脚导航栏"部分

http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

我想首先说 iOS5 将支持修复。
但是现在，您必须使用 javascript 来移动它。
让我们假设您的页脚 ID 是"myFooter"

1
2
3
4
5
6
7
8

window.addEventListener(
'scroll',
function() {
document.getElementById('myFooter').style.top =
(window.pageYOffset + window.innerHeight - footerHeight) + 'px';
},
false
);

滚动时应该移动它(footerHeight 是页脚的高度，如果样式对象用于定义高度，也可以使用 document.getElementById("myFooter").style.height 检索

如果上面的解决方案有什么我没有预见到的，你总是可以把视口分成两部分，内容和页脚。只需绝对定位页脚并将触摸事件(touchmove、touchend、targetTouches 等)与scrollTo(scrollTo(destination，duration))结合使用在您的内容区域