javascript - 如何停止位置: fixed jumps to top

标签 javascript jquery css

我正在为我的网站开发汉堡侧边栏菜单。这是我目前的工作。

Jsfiddle

我只想在汉堡菜单展开时停止滚动。因此,当菜单展开时,我将 overflow: hidden 添加到 body 中。 (单击 body 元素的切换 $('body').toggleClass('scroll-lock'); )

问题

我已经在 ios chrome 和 safari 浏览器中对此进行了测试。似乎 overflow: hidden 无法正常工作。我用谷歌搜索发现我还需要添加 position:fixed 。使用它并且工作正常。但是,当我向下滚动一点并点击我的汉堡菜单时,它会起作用但跳到顶部!

我用谷歌搜索并尝试了很多次,但没有使用任何纯 css 方法。

.scroll-lock{
  overflow: hidden;
  position: fixed;
}

我有点js,jquery知识。

但我有一个想法。如何使用 jquery .scrollTop() 函数来归档这个?找到此资源 Jsfiddle

有什么帮助吗?

最佳答案

也许这个解决方案可以帮助您:

1- 将位置从固定更改为绝对(滚动锁定)

2- 将父位置更改为相对位置

3-(可选)top:10px;left:10px;(多于或少于 10)(滚动锁定)

关于javascript - 如何停止位置: fixed jumps to top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54322016/

相关文章:

javascript - 防止React中的setState触发

jquery datepicker 统计特殊日子

html - 无法删除标题中 html 页面中的白色补丁(半圆)

html - 您可以在 SVG 中的单个 defs 标记内定义多个定义吗?

html - 缩放后元素的位置被另一个元素更改和隐藏

javascript - 动态 html 图像和跨度上的 Jquery onmouseover() 函数

javascript - 读取文件 Reactjs

javascript - iOS:禁用弹跳滚动但允许正常滚动

jquery - 使用 jQuery.browser 区分 Chrome 和 Safari

javascript - 如何在点击时旋转图像