javascript - 带有 html 移动标题的导航抽屉
问题描述
$(document).ready(function(){
$(window).scroll(function(){
if( $(this).scrollTop() > 0 ){
$('.header').addClass('header2');
} else {
$('.header').removeClass('header2');
}
});
});我对 Web 开发领域真的很陌生，我正在尝试制作一个带有移动标题的导航抽屉。当您向下滚动时，激活导航栏的按钮将保留在标题的顶部，您可以点击它。在我的代码中，这个按钮看起来不错，但它无法激活导航栏。由于某些未知原因，当在标题中包含按钮时，它会停止激活导航栏。欢迎您给我任何帮助。
这是我的代码：
* {margin:0; padding:0;}
body{background:#fffffA;}
header {
width:100%;
overflow: hidden;
background:#252932;
margin-bottom:20px;
}
.wrapper {
width:90%;
max-width:1000px;
margin:auto;
overflow:hidden;
}
header .logo {
color:#f2f2f2;
font-size:50px;
font-family:"Nexa";
line-height:200px;
float:left;
}
header nav {
float:right;
line-height:200px;
}
header nav a {
display:inline-block;
color:#fff;
padding:10px 20px;
text-decoration:none;
line-height:normal;
font-size:20px;
font-family:"Nexa";
font-weight:bold;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
header nav a:hover {
background:#F56F3A;
border-radius:50px;
}
.header2 {
position: fixed;
height:100px;
}
.header2 .logo {
line-height:100px;
font-size:30px;
}
.header2 nav {
line-height:100px;
}
.contenido p {
margin-bottom:1em;
}
.contenido h3 {
display:block;
padding:20px;
color:#fff;
text-align:center;
background:#F56F3A;
margin-bottom:1em;
}
@media screen and (max-width: 1025px) {
header .logo,
header nav {
width:100%;
text-align:center;
line-height:100px;
}
.header2 {
height:auto;
}
.header2 .logo{
line-height:50px;
}
.header2 nav {
line-height:50px;
}
}
body {
position: relative;
min-height: 100vh;
font-family: 'Roboto';
background-color:#fafafa;
}
.OpenMenuButton { cursor: pointer; }
.DrawerMenu {
position: fixed;
z-index: 99;
width: 100vw;
height: 100vh;
top: 0;
bottom: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
display: -ms-grid;
display: grid;
grid-template-areas: 'MENU OVERLAY';
-ms-grid-columns: 15fr 5fr;
grid-template-columns: 15fr 5fr
}
@media (min-width: 30em) {
.DrawerMenu {
-ms-grid-columns: 5fr 10fr;
grid-template-columns: 5fr 10fr;
}
}
#DrawerMenuTrigger:checked ~ .DrawerMenu {
-webkit-transform: none;
transform: none;
}
.MenuContainer {
grid-area: 'MENU';
background-color: rgb(18, 8, 109);
box-sizing: border-box;
padding: 24px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.Menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap
}
.Menu a {
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 16px 0;
}
.Menu a + a { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.MenuOverlay { grid-area: 'OVERLAY'; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- ACA SE IMPORTA EL CSS DE BOOSTRAP PARA HACERLO MÁS LINDO EN EL DEFAULT-->
<link rel="stylesheet" href="estilos.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="header.js"></script>
</head>
<body>
<header class="header">
<div class="wrapper">
<div class="logo">Name</div>
<nav>
<a href="#" >
<label for="DrawerMenuTrigger" class="OpenMenuButton" >
<image src = "images.ico"></image>
</label>
<input type="checkbox" id="DrawerMenuTrigger" onclick= f() hidden>
</a>
</nav>
</div>
</header>
<section class="contenido wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<aside class="DrawerMenu" >
<div class="MenuContainer" >
<nav class="Menu" >
<a><image src = "images.png"></image></a>
<a>User</a>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</div>
<label for="DrawerMenuTrigger" class="MenuOverlay"></label>
</aside>
</body>
</html>
解决方案
推荐阅读
- ruby-on-rails - 将整数类型的所有主键更改为 bigint，包括引用
- php - 创建作业时出现 AWS Mediaconvert PHP Api 错误
- javascript - 如何为 javascript 重新加载 div？
- java - Heroku 部署错误：java.lang.OutOfMemoryError
- android - 如何修复被广告内容拒绝的安卓游戏？
- python - 单击 div 折叠表格并在 pandas 数据框中转换其内容
- javascript - 自动审核系统白名单 discord.js
- excel - Excel 在我运行的大约 5% 中导出空白图像
- vb.net - 变量 aus 输出数据列表
- android - 如何将 MainActivity 代码转换为 DrawerActivity 中的代码（片段）