Question

我正在研究这个项目，我正在尝试在用户向下滚动时对标题产生缩小效果。我尽力展示代码，但它拒绝工作。由于我是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>

基本上我希望小标题部分出现，当用户向下滚动时，大标题会消失/消失，反之亦然，当用户向上滚动时。

非常感谢你！

Answer 1

您已定义函数smallHeaderSet（）但从不调用它。您需要为滚动事件创建一个事件侦听器，以便在用户滚动时调用此函数。

window.addEventListener('scroll', function(e) {
    smallHeaderSet();
});

根据y位置无法获取Javascript更改标题

1 个答案: