我的粘性导航栏工作在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，但不离线

回答

相关问题