好的stackoverflow人员，
我坚持使用粘性标题。我找到了如何在W3school上执行此操作的方法，但是当我将其实现到我的html / js / css文件中时，它无法正常工作。
简而言之，当向下滚动时，文本名称姓氏应该贴在浏览器窗口的顶部。 我已经尝试了很多东西，比如将js代码放在脚本标签中，更改函数名称并将其称为body中的第一个东西，依此类推。没有它带来了预期的结果。
以下是代码：
function scroll() {
myFunction()
};
var header = document.getElementById("home-name");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
var nav = false;
function openSideMenu(){
document.getElementById('side-menu').style.width = '250px';
//document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu(){
document.getElementById('side-menu').style.width = '60px';
//document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x){
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}body {
font-family: "Arial", Serif;
margin: 0;
/*without margin = 0 image would have small margin*/
background-color: white;
}
/*.background-home, .background-gallery, .background-contact {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.background-home{
background-image: url("/mnt/120AA1F00AA1D0D1/Editing/Wedding wedpage/obrazki/22343878_10210125005464505_1420779932_o.jpg");
background-position: center -900px;
min-height: 100vh;
}
.background-gallery {
background-image: url("/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/pictures/white_background.png");
background-position: center;
min-height: 100vh;
background-size: cover;
}
/*.background-contact {
background-image: url("/mnt/120AA1F00AA1D0D1/Editing/Wedding wedpage/obrazki/21167099_10209868968863750_7278329271954592356_o.jpg");
background-position: center;
height: 100vh;
}*/
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px;
transition: 0.4s;
}
.open-menu a {
float: left;
display: block;
color: white;
padding: 5px 5px;
position: fixed;
top: 0px;
font-size: 17px;
z-index: 1;
}
.open-menu a:hover {
transform: scale(1.1);
color: #000;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.side-nav {
height: 100%;
width: 60px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
/*hides overflow text in side menu*/
padding-top: 60px;
transition: 0.1s;
}
.side-nav ul {
list-style-type: none;
margin: 0;
padding-left: 14px;
}
.side-nav a {
padding: 10px 10px 10px 0px;
text-decoration: none;
text-align: left;
font-size: 20px;
color: black;
display: inline-block;
transition: 0.1s;
}
.side-nav li:hover {
transform: scale(1.1);
}
div#side-menu li {
background-position: left;
background-repeat: no-repeat;
}
div#side-menu li#youtube {
background-image: url("/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/pictures/youtube32.png");
}
div.list-margin {
padding-left: 50px;
}
.quote {
position: absolute;
top: 0px;
right: 12px;
font-family: "Dancing Script";
font-size: 60px;
color: white;
}
.title {
position: absolute;
text-align: center;
color: black;
font-size: 120px;
width: 100%;
font-family: 'Amatic SC', cursive;
}
#home-name {
position: absolute;
top: 0px;
left: 5%;
font-size: 50px;
color: black;
z-index: 1;
margin: 0;
font-family: 'Bellefair', serif;
}
#home-name:after {
content: "";
position: absolute;
border-top: 1px solid black;
left: 50%;
bottom: 0;
margin-left: -150px;
width: 300px;
height: 1px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
#titleGallery {
top: 100%;
font-family: 'Amatic SC', cursive;
}
#Terka-A-Jakub-Video {
position: absolute;
top: 150%;
left: 10%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wedding Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bellefair" rel="stylesheet">
<script src="main.js"></script>
</head>
<body onscroll="scroll();">
<div class="header" id="home-name">
<p>Name Surname</p>
</div>
<div class="background-home"></div>
<div class="background-gallery"></div>
<div class="background-contact"></div>
<div id="side-menu" class="side-nav">
<ul>
<li>
<a href="#">
<div class="list-margin">Home</div>
</a>
</li>
<li id="youtube">
<a href="#">
<div class="list-margin">Gallery</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">Get in Touch</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">About Me</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">Contact</div>
</a>
</li>
</ul>
</div>
<div>
<span class="open-menu">
<a href="#" onclick="toCross(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<div class="content">
<p class="quote">One video, <br> thousands memories.</p>
<iframe id="Terka-A-Jakub-Video" width="560" height="315" src="https://www.youtube.com/embed/xY2uUyFyNh4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="title" id="titleGallery">Gallery</p>
</div>
</body>
</html>
一如既往，我们将非常感谢任何帮助：）
答案 0 :(得分：0)
您的类不会覆盖元素的原始属性。使用重要样本如下：
.sticky {
position: fixed !important;
top: 0;
width: 100%;
};
var header = document.getElementById("home-name");
var sticky = header.offsetTop;
function scroll() {
myFunction()
};
function myFunction() {
console.log(window.pageYOffset >= sticky)
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
var nav = false;
function openSideMenu(){
document.getElementById('side-menu').style.width = '250px';
//document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu(){
document.getElementById('side-menu').style.width = '60px';
//document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x){
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}body {
font-family: "Arial", Serif;
margin: 0;
/*without margin = 0 image would have small margin*/
background-color: white;
}
/*.background-home, .background-gallery, .background-contact {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.background-home{
background-image: url("/mnt/120AA1F00AA1D0D1/Editing/Wedding wedpage/obrazki/22343878_10210125005464505_1420779932_o.jpg");
background-position: center -900px;
min-height: 100vh;
}
.background-gallery {
background-image: url("/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/pictures/white_background.png");
background-position: center;
min-height: 100vh;
background-size: cover;
}
/*.background-contact {
background-image: url("/mnt/120AA1F00AA1D0D1/Editing/Wedding wedpage/obrazki/21167099_10209868968863750_7278329271954592356_o.jpg");
background-position: center;
height: 100vh;
}*/
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px;
transition: 0.4s;
}
.open-menu a {
float: left;
display: block;
color: white;
padding: 5px 5px;
position: fixed;
top: 0px;
font-size: 17px;
z-index: 1;
}
.open-menu a:hover {
transform: scale(1.1);
color: #000;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.side-nav {
height: 100%;
width: 60px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
/*hides overflow text in side menu*/
padding-top: 60px;
transition: 0.1s;
display:none;
}
.side-nav ul {
list-style-type: none;
margin: 0;
padding-left: 14px;
}
.side-nav a {
padding: 10px 10px 10px 0px;
text-decoration: none;
text-align: left;
font-size: 20px;
color: black;
display: inline-block;
transition: 0.1s;
}
.side-nav li:hover {
transform: scale(1.1);
}
div#side-menu li {
background-position: left;
background-repeat: no-repeat;
}
div#side-menu li#youtube {
background-image: url("/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/pictures/youtube32.png");
}
div.list-margin {
padding-left: 50px;
}
.quote {
position: absolute;
top: 0px;
right: 12px;
font-family: "Dancing Script";
font-size: 60px;
color: white;
}
.title {
position: absolute;
text-align: center;
color: black;
font-size: 120px;
width: 100%;
font-family: 'Amatic SC', cursive;
}
#home-name {
position: absolute;
top: 0px;
left: 5%;
font-size: 50px;
color: black;
z-index: 1;
margin: 0;
font-family: 'Bellefair', serif;
}
#home-name:after {
content: "";
position: absolute;
border-top: 1px solid black;
left: 50%;
bottom: 0;
margin-left: -150px;
width: 300px;
height: 1px;
}
.sticky {
position: fixed !important;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
#titleGallery {
top: 100%;
font-family: 'Amatic SC', cursive;
}
#Terka-A-Jakub-Video {
position: absolute;
top: 150%;
left: 10%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wedding Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bellefair" rel="stylesheet">
<script src="main.js"></script>
</head>
<body onscroll="scroll();">
<div class="header" id="home-name">
<p>Name Surname</p>
</div>
<div class="background-home"></div>
<div class="background-gallery"></div>
<div class="background-contact"></div>
<div id="side-menu" class="side-nav">
<ul>
<li>
<a href="#">
<div class="list-margin">Home</div>
</a>
</li>
<li id="youtube">
<a href="#">
<div class="list-margin">Gallery</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">Get in Touch</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">About Me</div>
</a>
</li>
<li>
<a href="#">
<div class="list-margin">Contact</div>
</a>
</li>
</ul>
</div>
<div>
<span class="open-menu">
<a href="#" onclick="toCross(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<div class="content">
<p class="quote">One video, <br> thousands memories.</p>
<iframe id="Terka-A-Jakub-Video" width="560" height="315" src="https://www.youtube.com/embed/xY2uUyFyNh4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="title" id="titleGallery">Gallery</p>
</div>
</body>
</html>