Изменение размера DIV с использованием JavaScript не работает

Question

Я хотел бы автоматически изменить размер моей фиксированной панели меню, когда кто-то прокручивает страницу вниз. Я нашел рабочий пример онлайн, что я хотел (см. Jsfiddle ниже).

http://jsfiddle.net/bnsUB/4/

Затем я попытался реализовать его в мой проект .. но это не сработало. Прокрутка вниз не изменяла размер div как ожидалось.

Вот приведенный выше код в сочетании с моей панелью меню.

http://jsfiddle.net/ynq8etnj/

Кроме того, я не уверен, если я правильно импортировать это (это было некоторое время, так как я прикоснулся что-нибудь, связанных с веб-кодирование)

<link rel="stylesheet" type="text/css" href="css.css"> 
<script src="js.js"></script> 

Я пытался принимать jsfiddle я отправил первый и реплицируя на моем компьютере, затем открывая его в браузере, и он не работает, как на jsfiddle.

Кто-нибудь знает, что я здесь делаю неправильно?

Answer 1

Возможно, у вас установлена ​​более старая версия jquery. Или у вас нет библиотеки jquery. Включите последний jquery.

Вот обновленная версия: https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Demo

$(document).scroll(function(){ 
 
\t 'use strict'; 
 
     if ($(this).scrollTop()>45){ 
 
      // animate fixed div to small size: 
 
      $('#nav').stop().animate({ height: 45},100); 
 
     } else { 
 
      // animate fixed div to original size 
 
      $('#nav').stop().animate({ height: 60},100); 
 
     } 
 
    });

body { 
 
\t overflow-y: scroll; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t font-family: Century Gothic, sans-serif; 
 
\t font-color: #5C5C3D; 
 
\t font-size: 10px; 
 
\t background-color: #FFFFFF; 
 
\t height: 2000px; 
 
\t } 
 

 
#nav { 
 
\t background-color: #FFFFFF; 
 
\t border-bottom: thin solid #5C5C3D; 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t } 
 
\t 
 
#nav-menu { 
 
\t bottom:0px; 
 
\t height:60px; 
 
\t width: 960px; 
 
\t margin: 0 auto; 
 
\t background: url('images/logo2.png') no-repeat bottom left; 
 
\t text-align: right; 
 
\t } 
 
#nav ul{ list-style-type: none; padding: 0; margin: 0; } 
 
#nav ul li{ display: inline-block; } 
 
#nav ul li:hover{ background-color: #333; } 
 
#nav ul li a,visited{ color: #5C5C3D; display: block; padding: 15px; text-decoration: none; } 
 

 
#wrapper{ width: 960px; margin: 0 auto; text-align: left; } 
 
#content{ background-color: #FFF; border: 3px solid #DDD; padding: 20px; margin: 80px 0 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"> 
 
      <div id="nav-menu"> 
 
       <ul> 
 
        <li><a href="#">HOME</a></li> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">SOLUTIONS</a></li> 
 
        <li><a href="#">PARTNERS</a></li> 
 
        <li><a href="#">CONTACT US</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     
 
     <div id="wrapper"> 
 
      <div id="content"> 
 
       <h3>This is a heading!</h3> 
 
       <p>You're learning how to create a fixed horizontal navigation menu!</p> 
 
      </div> 
 
     </div>