My sticky navbar работает на jsfiddle, но не в автономном режиме

Совсем недавно сделал этот липкий навигатор с немного jquery и понял, что он не работает. Когда я попытался скопировать код для jsfiddle все работало нормальноMy sticky navbar работает на 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); 

      } 
});

устанавливаемого сотовый файл таким же, как в моем 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

My sticky navbar работает на jsfiddle, но не в автономном режиме

ответ

Смежные вопросы