html - 为什么我的 Ajax 响应显示在我的导航栏上?
问题描述
每当我滚动鼠标时,所有列出的管理卡都会出现在导航栏上。这是一个非常恼人的缺陷,我似乎无法理解我哪里出错了。任何帮助,将不胜感激。谢谢!
#mainsec {
height: 100vh;
width: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top"> Phemesoft
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="column">
<div id="sec1">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h2>Admins</h2>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5 cards-wrapper"></div>
</div>
</div>
</div>
</div>
<div id="sec2">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div id="sec3">
<div class="col-sm-6" id="mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
// console.log(response[a].Name);
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
</script>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
这是问题的图片: 卡片出现在导航栏上
Ps:我没有贴出/listadmins的映射,因为它只是普通的数据库查询
解决方案
谢谢大家的回复。我在评论中找到了答案。这是为导航栏使用更高的 z-index 值。
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
z-index: 2;
}
推荐阅读
- javascript - 动态字段的表单验证不在循环中工作
- php - 在一个查询中包含“AND”和“OR”的 Laravel MySQL 查询
- python - 我得到 ImportError:没有名为 pathlib 的模块,即使在使用 pip 安装 pathlib 之后也是如此
- javascript - 在场景中看不到简单的几何图形
- c - CS50 凯撒分段错误
- javascript - Angular 9 使用递归组件,新组件有旧输入
- mongodb - 在使用 MongoDB 获取每个字段的最后一个文档时对字段进行分组
- angular - 使用 ng select 时,收到有关“defineInjectable”的警告
- erlang - 如何将整数列表连接到 Erlang 中的字符串?
- c++ - 进程以退出代码 -1073740940 (0xC0000374) [CLion + SDL2] 结束