- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我和我的团队正在开发一个带有固定 header 的网络应用程序,该 header 不会滚动。
为了处理 iOS 上的过度滚动,我们需要检测负向滚动,并将固定标题再次重新定位为静态,使其与页面的其余部分一起滚动。
我们通过绑定(bind) jQuery 来实现这一点将处理程序滚动到窗口
:
$(window).scroll(function() {
if ($(window).scrollTop() < 0) {
// position static header postioning in order
// let the header behave correctly when overscrolling
}
});
当手动下拉(拖动)页面时,这很有效。但正如每个 iOS 用户都知道的那样,当页面从向下位置再次加速滚动时,一旦到达顶部,页面就会弹起(过度滚动)。
在这种情况下,我们的滚动处理不起作用。
目前我可以想象两个原因,为什么会出现这种不同的行为:
$(window).scrollTop()
?有没有人提示如何使我的滚动处理在这两种情况下都能正常工作?
最佳答案
如果 CSS 中的 position:fixed
不适合你,那么你应该尝试制作一个绘制循环,并且每次循环运行时,你放置一个水平偏移量等于您的用户滚动了多远。
基本上,如果 CSS 不起作用,你的 JS 应该如下所示:
var head = document.getElementById("header");
//head now has our header
head.style.position = "relative";
//and now, we can manipulate it's position
function draw(){
head.style.top = window.pageYOffset;
//all that's left to do is do this each and every frame.
}
如果您不知道如何进行绘制循环,请使用以下代码:
var frameRate = 60;
var frameCounter = (function(){
var counter = 0;
return function(){
counter ++;
if(counter > frameRate/1000){
counter -= frameRate/1000;
draw();
}
}
})();
setInterval(frameCounter, 1);
关于javascript - iOS Safari 过度滚动 : Pulling down vs. 弹跳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36179721/
我正在开发适用于 Wordpress 的 PSD,并面临着根据颜色过度对齐背景图像或相反的问题。 在桌面上一切都很好,但在移动设备上背景图像变小了(我使用了 background-size: 100%
在标准 Modelica 流体流量源中,通常指定流量或压力。例如,以下边界设置(P 表示压力边界,F 表示流量边界)通常会围绕管道组件: P - 管道 - P F - 管道 - P 但是,有时在同一侧
我正处于设计基于 Azure 的应用程序的早期阶段。考虑到我可能预期的需求的变化性,Azure 吸引我的地方之一是它的可扩展性。因此,我试图保持事物松散耦合,以便我可以在需要时添加实例。 我看到的关于
我与 Xcode 4 dot notation code sense problem 正好相反!点符号的代码完成不仅显示属性,还显示我的方法(在每个完成的左侧标记 P 或 M 分别指示它是属性还是方法
我是一名优秀的程序员,十分优秀!