代碼在codepen和jsfiddle中工作

我的代碼僅在滾動時才顯示的標題僅在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; 
    } 
}

// 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文檔中的相同代碼，減去頭部。）

來源

2017-02-06 COOKIE

你檢查你的瀏覽器控制檯的錯誤，當你說*任何意義。「這沒」 t當我打開文件時工作「*你的意思是在本地運行嗎？ – NewToJS

CHecked控制檯。 3錯誤：http：//prntscr.com/e506uy。我如何解決它們？ – COOKIE

我想我可以看到問題如果你試圖在本地運行。嘗試添加'https：'到javascript庫url。例子'https：// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'也應該使用'$（document）.ready（function（）{}）;'https ：//learn.jquery.com/using-jquery-core/document-ready/ – NewToJS

您需要在調用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庫

來源

2017-02-06 05:28:47

看起來您可能會在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已初始化後。

來源

2017-02-06 01:34:39

剛剛補充說。不起作用。但控制檯有這個錯誤：http：//prntscr.com/e508g3 – COOKIE

它看起來像第5行也依賴jQuery被初始化。我更新了上面的答案來解釋這一點。 –

代碼在codepen和jsfiddle中工作

回答

相關問題