jquery - 如何防止移动端界面头部与内容重叠,同时保证内容始终保持在界面下方?

标签 jquery html css mobile

到目前为止,我一直在尝试寻找解决方案但无济于事,但基本上我遇到了这个问题,我试图将我的移动内容向下推送并使其停留在移动界面下方。当我点击按钮时,这个问题仍然存在,但界面 anchor 一直与我的内容标题重叠,而不是停在内容标题本身上方。

这是供您引用的 JS Fiddle:jsfiddle.net/r936zwe1/

我还尝试通过插入 padding-top 并调整主体 CSS 来向下插入主体,但它似乎不起作用,内容的顶部一直停在最顶端,而不是停在移动界面的正下方.

感谢任何帮助,谢谢!

最佳答案

如果我理解正确的话,您希望确保当单击页眉中的链接并且页面动画时,页眉不会与其滚动到的部分的内容重叠。

如果是这种情况,则只需减去标题的高度,例如:

'scrollTop': $target.offset().top-$('.dock-top').height()

根据您当前的 CSS 标记,您可能需要尝试使用其他偏移整数,但这应该会让您朝着正确的方向前进。

jsFiddle

关于jquery - 如何防止移动端界面头部与内容重叠,同时保证内容始终保持在界面下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27122256/

相关文章:

javascript - 如何在按 Enter 时重新加载输入标签所在的特定 div

html - 如何在 rails 4 中将部分表单呈现为水平表单

css - 为什么 `white-space-collapsing` CSS3 属性的引入被推迟到 CSS-text-4(可能是 `text-space-collapse` )?

html - flex 订单不适用于无序列表

jquery - 全日历在移动中改变颜色

php - 如何在MySQL更新记录上使用substr?

javascript - 可调整大小的 DIV 在新行上制作文本框

javascript - HTML5 音频playbackRate 属性不适用于移动浏览器?

html - 移动设备上的 Stripe 结帐按钮太小

javascript - jQuery on click 在相同的 .wrappers 中独立循环图像