时间戳

首页 > 解决方案 > 位置固定元素在滚动时移动

html - 位置固定元素在滚动时移动

问题描述

汉堡图标位置固定。向下滚动时，图标会在停止前向上移动几个像素。向上滚动时，图标将返回其原始位置。我找不到这个错误的原因。

HTML

<div class="rdi__menu-btn">
    <i class="open">menu</i>
    <i class="close">close</i>
</div>

CSS

div.rdi__menu-btn {
    position: fixed;
    top: 0;
    left: 0;
}
div.rdi__menu-btn i {
    margin: 0;
    padding: 8px;
    cursor: pointer;
}

问题似乎不在于固定元素，而是注入了 SquareSpace .sqs-block {padding-bottom: 17px}，即使内容没有溢出页面，也会导致页面轻微滚动。奇怪的是，我之前在平台上的项目并没有发生这种情况。

标签： htmlcss

解决方案

在您的head标签中，更改

<meta name="viewport" content="width=device-width, initial-scale=1.0">

为了

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

然后，再次禁用并启用设备工具栏以检查它。
有时需要更完整的视口<meta>标签才能使某些属性正常工作。

推荐阅读