0
スクロールアップ時にのみ表示されるヘッダーのコードは、jsfiddleまたはcodepenです。プログラムにコードを書きましたが、ファイルを開いたときには機能しませんでした。私はすべてのコードをcodepenとjsfiddleに貼り付けていました。何が欠けているのか、どこが間違っていたのですか？コードはcodepenとjsfiddleで動作します
HTML
<body>
<header class="nav-down">
<h1>William Chen</h1>
</header>
<section class="module parallax parallax-1">
<div class="container">
<h1>Hi.</h1>
</div>
</section>
<section class="module content">
<div class="container">
<h2 class="about">Lorem Ipsum Dolor hello</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</section>
<section class="module parallax parallax-2">
<div class="container">
<h1>What I can do.</h1>
</div>
</section>
<section class="module content">
<div class="container">
<h2 class="about">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<h2 class="about">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</section>
<section class="module parallax parallax-3">
<div class="container">
<h1>I can help.</h1>
</div>
</section>
<section class="module content">
<div class="container">
<h2 class="about">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<div class="contact">
<a class="contact" href="mailto:[email protected]?Subject=Website%20Visitor" target="_blank"><i class="fa fa-envelope-o icon">`</i>Message Me</a>
</div>
</div>
</section>
<script src="Scripts/menu.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</body>
CSS
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #f5b335;
height: 80px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -80px;
}
body, html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright{
color: white;
text-transform: uppercase;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
div.footer{
float: left;
margin-left: 2em;
}
h1 {
text-align: center;
font-family: 'Fjalla One', sans-serif;
color: #666666;
}
p {
color: black;
font-family: 'Oswald', sans-serif;
}
a.contact {
text-decoration: none;
color: white;
background-color: #36a2dc;
padding: 20px;
padding-left: 10px;
border-radius: 5%;
cursor: pointer;
outline: none;
height: 100px;
width: 200px;
font-family: 'Quicksand', sans-serif;
}
i.icon {
padding: 8px;
}
=========================================================== */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("Images/Image1.jpg");
}
section.module.parallax-2 {
background-image: url("Images/Image2.jpg");
}
section.module.parallax-3 {
background-image: url("Images/Image3.jpeg");
}
@media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
@media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
JS
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
私はcodepenとJSフィドル多数回に、私自身の文書にすべての私のコードをコピーして貼り付けてきたPSそれらが正しいことを確認してください（これは、私のHTML、CSS、jsドキュメントの同じコードです、頭をマイナスします）。
のいずれかの意味を理解することができます前に、自分自身を定義する必要がありますが、あなたは、エラーについては、ブラウザのコンソールを確認しており、あなたは*言うとき、「それはdidnのファイルを開いたときに働くことはありません "*あなたはそれをローカルで実行することを意味しますか？ – NewToJS
チェッキコンソール。 3エラー：http：//prntscr.com/e506uy。どうすれば修正できますか？ – COOKIE
これをローカルで実行しようとしている場合、私は問題を見ることができると思います。 javascriptライブラリURLに 'https：'を追加してみてください。 '$（document）.ready（function（）{}）;' https：// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'のように、 ：//learn.jquery.com/using-jquery-core/document-ready/ – NewToJS