我的粘性導航欄工作在jsfiddle，但不離線

剛剛做了一個jQuery的一點點粘滯的導航欄，並意識到它不起作用。當我試圖複製我的代碼的jsfiddle一切正常我的粘性導航欄工作在jsfiddle，但不離線

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="css\style.css"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript" src="js\scripts.js"></script> 
</head> 
<body> 
<header onmouseover="this.style.background='white'" onmouseout="this.style.background='#e6e6e6'"> 
<img src="Photos\logo.png" width="210px" height="150px"> 
</header> 
    <ul class="navbar"> 
     <li><a href="#">Model</a></li> 
    </ul> 
<div class="main">lots of words......</div 
</body> 
</html>

而且scripts.js中的文件：

var n=$(".navbar"), 
    ns="navbar-scrolled", 
    head=$('header').height(); 
    $(window).scroll(function() { 
      if($(this).scrollTop() > head) { 
       n.addClass(ns); 
      } 
      else { 
       n.removeClass(ns); 

      } 
});

CSS文件是一樣的，我JSFiddle

來源

2017-02-04 Valentin Dragoi

默認的jsfiddle運行你的腳本在窗口加載，這意味着它在之後運行DOM已經被加載。你需要自己正常做這個。只是輕微的變化將解決它......

$(function() { var n=$(".navbar"), ns="navbar-scrolled", head=$('header').height(); $(window).scroll(function() { if($(this).scrollTop() > head) { n.addClass(ns); } else { n.removeClass(ns); } }); });

你只需要來包裝你的代碼是這樣的...

$(function() { // your code goes here });

還有其他的方法做同樣的，但將解決您的問題。

來源

2017-02-04 20:00:07 Archer

非常感謝！ :) –

不客氣 - 很高興幫助:) – Archer

我的粘性導航欄工作在jsfiddle，但不離線

回答

相關問題