固定网格导航栏和侧边栏

Question

我现在正在使用HTMLCSS的控制面板上工作，我使用网格布局拆分页面，但问题是导航栏&侧边栏未修复我试过几种方法，包括position: fixed;飞越-y：自动，但对我不起作用。

https://jsfiddle.net/khalil_elyacubi/ckj8bqe9/2/

图片一

图片二

Answer 1

我希望您正在寻找这样的东西。

$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";

$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
transition: 0.3s;
}
html,body{
height:100%;
}
.container{ 
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas: 
"sidebar header"
"sidebar main";
height: 100%;
}
/*------------------------------------*/
/* Navbar */
/*------------------------------------*/
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: sticky;
}
.left-nav a{
font-weight: 300;
font-size: 13px;
text-decoration: none;
color: white;
margin: 0 10px;
}
.left-nav a:hover{
color: rgb(187, 187, 187);
}
.left-nav i:hover{
color: rgb(187, 187, 187);
}   

.navbar{
grid-area: header;
background-color: rgba(38, 40, 48, 1);
color: white;
align-items: center;
height: 100%;
}
/*------------------------------------*/
/* Sidebar */
/*------------------------------------*/
.sidebar{
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.sidebar{
grid-area: sidebar;
background-color: rgba(38, 40, 48, 1);
color: white;
}
.logo{
padding: 20px;
}
.logo img{
width: 100%;
}
.category-head{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 83%;
justify-content: space-between;
font-size: small;
font-weight: 300;
color: rgba(255, 255, 255, 0.452);
margin-top: 15%;

}
.width_element{
width: 81%;
}
.category-pages, .category-select{
display: flex;
flex-direction: column;
width: 84%;

}
.category-select{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;

padding: 2.5% 7%;
color: #C6C6C7;
font-weight: 400;
transition: .3s;
font-size: 0.93rem;
}
.category-select:hover{
background-color: rgba(255, 255, 255, 0.06);
border-radius: 5px;
color: white;
}

.categorySelected{
color: rgba(255, 185, 97, 1);
box-shadow: 0px 0px 21px -13px #ff9d1c6b;
background-color: rgba(53, 56, 65, 1);
border-radius: 5px;
margin-top: 5%;
padding: 3.5% 7%;
}
/*-------select box-------*/
select {
z-index: 3;
float: left;
}

/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
cursor: pointer;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
font: 13px/1.5 "Poppins", sans-serif;
}
.custom-select-trigger {
position: relative;
/* display: block; */
min-width: 130px;
padding: 6% 104px 6% 25px;
font-weight: 600;
color: #6e7c83;
line-height: 50px;
background-color: rgba(53, 56, 65, 1);
border-radius: 7px;
cursor: pointer;
transition: all 0.2s ease-in-out;

}
.custom-select-trigger:hover {
-webkit-box-shadow: 0px 10px 50px 0px rgba(70, 73, 83, 0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.custom-select-trigger:before {
position: absolute;
display: block;
content: "";
width: 1px;
height: 50px;
top: 3px;
right: 50px;
margin-top: -3px;
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 20px;
margin-top: -3px;
border-bottom: 1px solid #c7d1d6;
border-right: 1px solid #c7d1d6;
transform: rotate(45deg) translateY(-50%);
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0%;
right: 0;
width: 100%;

margin: 10px 0;
border-radius: 5px;
box-sizing: border-box;
/*  box-shadow: 0 2px 1px rgba(0, 0, 0, .1); */

background: rgba(53, 56, 65, 1);
transition: all 0.2s ease-in-out;

opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
border: 0;

height: 300px;
overflow-y: auto;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(-8px);

-webkit-box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
font: 13px/1.5 "Roboto", sans-serif;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.05s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;

border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.custom-option:hover,
.custom-option.selection {
color: #fff;
background-color: rgba(253, 183, 102, 0.1);
border: 1px solid rgba(253, 183, 102, 1);
}
/*-------select box end*-------/


/*------------------------------------*/
/* main content */
/*------------------------------------*/
.main{ 
justify-content: start;
display: flex;
flex-direction: column;
align-items: center;
grid-area: main;
background-color: rgba(30, 31, 37, 1);
color: white;
height: 100%;
overflow-y: auto;
}
.cotainer{
margin-top: 2%;
width: 90%;
height: auto;
display: flex;
flex-direction: column;
align-content: center;
}

.server-banner{
width: 100%;
height: 250px;
/* background: url(./baner1.png) no-repeat; */
filter: blur(5px);
border-radius: 10px;
/* background-size: cover; */
overflow: hidden;
}
.server-banner img{
width: 100%;

position: relative;
top: -140px;
opacity: 25%; 
z-index: -1;
}

.server{
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
bottom: 55px;
}

.server img{
width: 9%;
}
.server-members{
padding-left:2%;
}
/*------------------------------------*/
/* Scroll Bar */
/*------------------------------------*/
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: transparent; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555; 
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>grid dashboard</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="left-nav">
<a href="#"><i class="fas fa-plus"></i>   Support server</a>
<a href="#"><i class="fas fa-code"></i>   Commands</a>
</div>
<div class="right-nav">user.icos</div>
</div>
<div class="sidebar">
<div class="logo"><img src="./logo.png" alt="" srcset=""></div>


<select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager">
<option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option>
<option value="A">Ticket Manager</option>
<option value="B">Ticket Manager</option>
<option value="C">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D"><i class="fas fa-cog"></i>Ticket Manager</option>
</select>

<div class="category-head">General  <i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select categorySelected"><div class="title">Overview</div> <div class="icon"><i class="fas fa-chart-bar"></i></div></div>
<div class="category-select "><div class="title">Premium</div> <div class="icon"><i class="fas fa-crown"></i></div></div>
</div>
<div class="category-head width_element">Customise bot<i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select"><div class="title">Settings</div> <div class="icon"><i class="fas fa-cog"></i></div></div>
<div class="category-select"><div class="title">Pannels</div> <div class="icon"><i class="fas fa-paper-plane"></i></div></div>
<div class="category-select"><div class="title">Logs</div> <div class="icon"><i class="fas fa-history"></i></div></div>
<div class="category-select "><div class="title">Archived tickets</div> <div class="icon"><i class="fas fa-folder-open"></i></div></div>
</div>
</div>
<div class="main">
<div class="cotainer">
<p>content</p> 
<div class="server-info">
<div class="server-banner"> <img src="./baner1.png" alt=""></div>

<div class="server">
<img src="./server-logo-lg.png" alt="">

<div class="server-members">
<div class="server-name">Ticket Manager</div>
<div class="server-id">ID: 123456789</div>
</div>
</div>

</div>

<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
</div>

</div>

</div>
<script src="./script.js"></script>
</body>
</html>