我正在做这个元素，目前我正在尝试在用户向下滚动时为页眉提供收缩效果。我尽力显示代码，但它无法正常工作。而且由于我是 JavaScript 的新手，所以我无法有效地调试它。请帮忙 这是代码:
function smallHeaderSet() {
var yPosition = window.pageYOffset,
bigHeader = document.querySelector("header"),
smallHeader = document.getElementById("headerSmall"),
positionLimit = 150;
if (yPosition > positionLimit) {
smallHeader.style.display = "block";
bigHeader.style.display = "none";
}
}body {
margin: 0;
font-family: Caviar, "Times New Roman", sans-serif;
clear: both;
text-align: center;
width: 100%;
background-color: #FFFF61;
background-attachment: fixed;
}
p,
#text_area,
span {
z-index: 0;
font-size: 1.1em;
}
#main {
width: 100%;
padding: 0;
}
/* start the whole heading section */
header h1 {
font-size: 5em;
color: #000000;
font-family: "Alex Brush", "Times New Roman", sans-serif;
padding-left: 2%;
float: left;
margin-top: 1%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#hOneSmall {
font-size: 2.5em;
color: #000000;
font-family: "Alex Brush", "Times New Roman", sans-serif;
padding-left: 1.2%;
float: left;
margin-top: 1%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav h2,
#smallNav h2 {
font-weight: normal;
}
header nav {
float: right;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.1em;
padding-top: 2%;
padding-right: 2%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#smallNav {
float: right;
font-family: Junction, "Times New Roman", sans-serif;
font-size: .7em;
padding-top: 1.2%;
padding-right: 1.2%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a,
#smallNav a {
color: #000000;
text-decoration: none;
}
header nav a:hover,
#smallNav a:hover {
text-decoration: underline;
}
header nav a:visited,
#smallNav a:visited {
color: #000b26;
}
header {
background-color: #ff5e5e;
display: block;
width: 100%;
text-align: left;
position: fixed;
overflow: hidden;
z-index: 999;
/*box-shadow: 5px 8px 30px #000000;*/
height: 20vh;
}
#headerSmall {
background-color: #ff5e5e;
display: block;
width: 100%;
text-align: left;
position: fixed;
overflow: hidden;
z-index: 999;
/*box-shadow: 5px 8px 30px #000000;*/
height: 10vh;
}
#headerSmall {
display: none;
}<!doctype html>
<!--Student144 | Period 6 | Lab 6-->
<html lang="en">
<head>
<title>Stamp World.</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("#checking").mouseenter(function() {
$("#checking .checktext").fadeIn(450);
});
$("#checking").mouseleave(function() {
$("#checking .checktext").fadeOut(200);
});
$("#checking2").mouseenter(function() {
$("#checking2 .checktext").fadeIn(450);
});
$("#checking2").mouseleave(function() {
$("#checking2 .checktext").fadeOut(200);
});
$("#checking3").mouseenter(function() {
$("#checking3 .checktext").fadeIn(450);
});
$("#checking3").mouseleave(function() {
$("#checking3 .checktext").fadeOut(200);
});
$("#checking4").mouseenter(function() {
$("#checking4 .checktext").fadeIn(450);
});
$("#checking4").mouseleave(function() {
$("#checking4 .checktext").fadeOut(200);
});
$("#checking5").mouseenter(function() {
$("#checking5 .checktext").fadeIn(450);
});
$("#checking5").mouseleave(function() {
$("#checking5 .checktext").fadeOut(200);
});
});
</script>
<script>
var checkMore = "False"
function toggleText() {
var lessText = "Stamps might not be a big part in our modern day life, but it was one of the most important things for some one to communicate with another before e-mails or cell phones were introduced (or before they became common in everyday life). It was one of the most important ways through which the government got revenue and through which people were, in a way, express their feelings through different stamps. It was a big deal to get a stamp that was newly released or was declared to be only produced in few amount, so the race for stamp collection started way before it became extinct, and is still going on.";
var moreText = " It started as a sportive thing to do, like as a hobby, but over the course of two-three decades, those ancient stamps were worth a lot because of their rareness. Of course one can simply replicate the stamps and sell them for low cost (some even cheat by selling them as the real ones!), but business people see these trades seriously; they have teams that study those stamps, who verify the validity of the specific stamp, before buying it. Why? Well their cost would eventually increase over time, which is a profit for the buyer, and it is also a way to showcase their wealth."
if (checkMore == "False") {
document.getElementById("text_area").innerText = lessText + moreText;
document.getElementById("toggler").innerText = "Show Less";
checkMore = "True";
} else if (checkMore == "True") {
document.getElementById("text_area").innerText = lessText;
document.getElementById("toggler").innerText = "Show More";
checkMore = "False";
}
}
function smallHeaderSet() {
var yPosition = window.pageYOffset,
bigHeader = document.querySelector("header"),
smallHeader = document.getElementById("headerSmall"),
positionLimit = 150;
if (yPosition > positionLimit) {
smallHeader.style.display = "block";
bigHeader.style.display = "none";
}
}
var position, backgroundEffect, backgroundEffect2, backgroundEffect3;
function parallax() {
backgroundEffect = document.getElementById('background_two');
backgroundEffect2 = document.getElementById('background_three');
backgroundEffect3 = document.getElementById('background_four');
position = window.pageYOffset;
backgroundEffect.style.top = position * -0.15 + 'px';
backgroundEffect2.style.top = position * -0.4 + 'px';
backgroundEffect3.style.top = position * -0.155 + 'px';
}
window.addEventListener('scroll', parallax), false;
</script>
<style>
#toggler {
text-decoration: underline;
}
#toggler:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<!--open main div-->
<header>
<h1>Stamp World.</h1>
<nav>
<h2>
<a href = "index.htm">Home</a>
</h2>
</nav>
</header>
<!--close header-->
<div id="headerSmall">
<div id="hOneSmall">Stamp World.</div>
<div id="smallNav">
<h2>
<a href = "index.htm">Home</a>
</h2>
</div>
</div>
<!--header small-->
</body>
</html>基本上，当用户向下滚动时，我希望小标题部分出现而大标题逐渐消失/消失，反之亦然。
非常感谢!
最佳答案
您已经定义了函数 smallHeaderSet() 但从未调用它。您需要为滚动事件创建一个事件监听器，以便在用户滚动时调用此函数。
window.addEventListener('scroll', function(e) {
smallHeaderSet();
});
关于javascript - 无法让 Javascript 根据 y 位置更改标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33176029/