我試圖制作一個貼在頂部的導航欄，但它不起作用。我也嘗試將 div 位置：固定到頂部，但滾動后 div 與其他 div 重疊，所以我放棄了位置：固定。我如何獲得職位：堅持作業？
這是我的代碼：
var navbar = $('header:first');
$(window).scroll(function() {
if (window.pageYOffset >= 120) {
$('#nav-hidden').css({
'display': 'none'
});
$('header:first').css({
'background': 'none',
'height': '20vh'
});
navbar.addClass('sticky')
} else {
$('#nav-hidden').css({
'display': 'inherit'
});
$('header:first').css({
'background': "linear-gradient(to bottom,rgba(255, 255, 255, 1.0) 40%,rgba(255, 255, 255, 0.5)), url('background.jpg') center no-repeat",
'height': '100vh',
'position': 'inherit'
});
navbar.removeClass("sticky");
}
});* {
padding: 0;
margin: 0;
}
html body {
min-height: 100%;
height: 100%;
scroll-behavior: smooth;
}
header {
height: 100vh;
width: 100%;
position: inherit;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 40%, rgba(255, 255, 255, 0.5)), url('background.jpg') center no-repeat;
background-size: cover;
}
nav {
padding: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.6rem;
font-family: 'Roboto', sans-serif;
}
nav ul {
display: flex;
margin-top: auto;
}
nav ul li {
list-style: none;
}
nav ul li a {
padding: 2rem;
font-weight: bold;
color: rgba(1, 1, 1, .9);
}
.logo a {
color: rgba(1, 1, 1, 1);
font-weight: bolder;
font-size: 4rem;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: rgba(1, 1, 1, .8);
}
a:focus {
text-decoration: none;
color: rgba(1, 1, 1, .5);
}
#nav-hidden {
position: absolute;
text-align: left;
bottom: 60vh;
left: 8vw;
}
.container {
height: 100vh;
width: 100%;
padding-top: 20vh;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
}
.content {
background: rgba(1, 1, 1, .2);
}<!DOCTYPE html>
<html>
<head>
<title> Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<h1 class="logo"><a href="Main.html">Tour</a></h1>
<ul class="header">
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Social Media</a></li>
<li><a href="">Comment</a></li>
<li><a href="">Share</a></li>
</ul>
</nav>
<div id="nav-hidden">Explore.</div>
</header>
<div class="container" class="content">hi</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
</body>
</html>uj5u.com熱心網友回復：
因此，您的代碼很難除錯，因為它是以復雜的方式撰寫的。我提供了一些關于如何重構代碼的指導，這將使它更容易修復。
首先，更新您的 HTML 以使用類（在適當的情況下），以便您的 CSS 規則可以參考類而不是 DOM 元素。例如，您可以將標題更新為：
...
<div class="header-container">
<h1><a class="logo-link" href="#">Tour</a></h1>
<ul class="nav-menu">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About us</a></li>
<li><a class="link" href="#">Social Media</a></li>
<li><a class="link" href="#">Comment</a></li>
<li><a class="link" href="#">Share</a></li>
</ul>
</div>
<div class="explore-btn">Explore</div>
...
然后你的 CSS 變成這樣：
...
.header-container {
padding: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.6rem;
font-family: 'Roboto', sans-serif;
}
.nav-menu {
display: flex;
margin-top: auto;
}
.link {
padding: 2rem;
font-weight: bold;
color: rgba(1, 1, 1, .9);
}
.link:link {
text-decoration: none;
}
.link:visited {
text-decoration: none;
}
.link:hover {
text-decoration: none;
color: rgba(1, 1, 1, .8);
}
.link:focus {
text-decoration: none;
color: rgba(1, 1, 1, .5);
}
.logo-link {
color: rgba(1, 1, 1, 1);
font-weight: bolder;
font-size: 4rem;
}
.explore-btn {
display: block;
position: absolute;
text-align: left;
bottom: 60vh;
left: 8vw;
}
.explore-btn .hidden {
display: none;
}
...
以下樣式應該是您在標準樣式表重置檔案旁邊定義的基本樣式集的一部分：
* {
padding: 0;
margin: 0;
}
html body {
min-height: 100%;
height: 100%;
scroll-behavior: smooth;
}
...
該 JS 檔案中的 CSS 應轉換為實用程式類，這些類可以使用以下方式打開/關閉：
...
$(window).scroll(function() {
if (window.pageYOffset >= 120) {
$('.explore-btn').addClass('hidden');
} else {
$('.explore-btn').removeClass('hidden');
}
});
Notice that I don't use id selectors. Avoid them if you can, because they make your selectors brittle by being too specific. Also, avoid using HTML elements as selectors (except in your base rules), because you want to avoid your CSS from "bleeding" into other places in unintended ways. Defining specific classes on elements (that you intend to style) is a good way of managing scope.
If I see a style defined in your HTML, I know that it exists somewhere in your CSS. It should be a flat selector (if possible). Keep it simple. The only nested selector I use is the one where explore-btn toggles between hidden and visible. This is a good system.
If you find yourself repeating the same styles across multiple classes, then that's a sign that you should refactor it. Similarly, if you find yourself nesting selectors too deeply (e.g. nav ul li a), you probably want to define a special class for that element (e.g. .link). There's always exceptions, but you should aim for the simplest approach first.
Once you're done refactoring the code then save your code here: https://jsfiddle.net/ and ping me with a link. I can take another look.
UPDATE:
So, you can find an example of a sticky header here: https://jsfiddle.net/yj49tn6r/
Using your refactored code, all I needed to do was define a JQuery method that toggled the sticky class on the header-container:
$(window).scroll(function () {
if (window.pageYOffset >= 120) {
$(".header-container").addClass("sticky");
} else {
$(".header-container").removeClass("sticky");
}
});
Then define the utility class itself:
.sticky {
position: fixed;
top: 0;
width: 100%
}
uj5u.com熱心網友回復：
當您使用固定 div 時，您還可以在頁面頂部添加邊距：
body::before {
content: "";
display: block;
margin-top: 6rem;
}
或者更好，請閱讀“scroll-padding-top”： https ://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top 它是完全支持的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425602.html
標籤：javascript html jQuery css