我最近在开发我的副项目时遇到了这个奇怪的问题。我在 .txt 文件中添加了一个用于注销目的的按钮collapsible sidebar。它在 PC Chrome 上完美运行，但在 ios safari 和 ios chrome 上有两个奇怪的问题。首先，在ios上加载页面时，您不会在侧边栏中看到该按钮。但是，如果您尝试在侧边栏打开的情况下随机上下滚动页面，该按钮就会神奇地出现sidebar。关闭侧边栏后，该按钮将保留在主页中（它应该与侧边栏一起隐藏）。
我找不到导致这些奇怪错误的原因，所以我在这里发帖并希望有人可以帮助我解决这些问题。任何帮助将不胜感激！（源代码在下面）
图片：
主页： https: //i.stack.imgur.com/DEj70.jpg
按钮丢失： https: //i.stack.imgur.com/Vil0I.jpg
滚动一段时间后，出现： https ://i.stack.imgur.com/qcKD7.jpg
关闭侧边栏后，按钮将被保留： https ://i.stack.imgur.com/09vBS.jpg
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Chickvago</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/TWNateLo/NCKU-AI-Course/b1b6c4c3/Front%20End/Deploy/css/Main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<link rel="icon" href="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div class="wrapper" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" …我想将导航栏固定在顶部，并在打开折叠菜单时像往常一样在静态或仅导航时下推内容。
像这样：（https://getbootstrap.com/examples/navbar-static-top/）但是我希望将导航栏固定在顶部。
我之前读过这篇文章：Navbar-fixed-top将内容向上翻页
但添加填充将无法正常工作，请帮助我解决此xD
我的密码
CSS和HTML：
/*------------------------------------------------- Hero Image -------------------------------------------------*/
.calltoaction {
text-align: center;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.calltoaction h1 {
text-align: center;
display: inline-block;
font-size: 70px;
/*text-transform: uppercase;*/
letter-spacing: 2px;
border: 8px solid #FFFFFF;
border-radius: 13px;
padding: 17px 20px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
.calltoaction h3 {
color: #FFFFFF; …