Question

仅在向上滚动时显示的标题代码仅适用于jsfiddle或codepen。我在我的程序中编写了代码，当我打开文件时它没有用。我将所有代码粘贴到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:williamjchenca@gmail.com?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;
}

PS我已经将我的所有代码复制并粘贴到我自己的文档中，多次进入codepen和js，以确保它们正确无误。（这与我的html中的代码相同），css，js文件。减去头部。）

Answer 1

看起来您可能在初始化jQuery之前添加了$(window).scroll侦听器。您还尝试在jQuery初始化之前将navbarHeight设置为基于jQuery的值。尝试在jQuery onReady侦听器中包装任何依赖于jQuery的东西：

// Hide Header on on scroll down
var didScroll, navbarHeight;
var lastScrollTop = 0;
var delta = 5;

$().ready(function(){
  navbarHeight = $('header').outerHeight();

  $(window).scroll(function(event){
    didScroll = true;
  });
})

$(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;
}

这将确保在 jQuery初始化之后添加滚动侦听器。

Answer 2

调用jquery js脚本后，需要调用menu.js文件。像这样：

<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>
<script src="Scripts/menu.js"></script>

你的jQuery需要在menu.js能够理解jQuery库之前定义自己

代码适用于codepen和jsfiddle

2 个答案: