2014-10-10 3 views
0

Я пробовал этот эффект прокрутки прокрутки javascript, изображение меняет цвет, когда объект прокручивается над ним, и у меня есть весь код точно такой же, как и у учебника, за исключением того, что javascript не срабатывает? This is the tutorial I used. Вот HTML У меня есть:Javascript wont fire?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Slip Scroll</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 




<div class="container dark"> 
<img src="images/logogreen.svg" class="default" height="200px"> 
</div> 


<div class="container light"> 
<img src="images/logopink.svg" class="moveable" height="200px"> 
</div> 


<div class="container dark"> 
<img src="images/logogreen.svg" class="moveable" height="200px"> 
</div> 



<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="js/slipScroll.js"></script> 


</body> 
</html> 

Вот JavaScript им с помощью:

var setLogo = function() { 

    $('.moveable').each(function() { 
    $(this).css('top', 
     $('.default').offset().top - 
     $(this).closest('.container').offset().top 
    ); 
    }); 

}; 

$(document).scroll(function() { 
    setLogo(); 
}); 

setLogo(); 
+1

Вы не хватает своего 'px' из верхней CSS. Кроме того, обязательно запустите его после загрузки окна. – juvian

+0

. Вам не хватает PX в верхней части и почему бы не использовать .parent() вместо ближайшего() –

+0

Что скажет консоль F12 – loveNoHate

ответ

0
 $('.default').offset().top - $(this).closest('.container').offset().top + 'px' 

На этой линии вы пытаетесь

Int- ИНТ строки

Это может вызвать проблемы, так что d должно быть:

 ($('.default').offset().top - $(this).closest('.container').offset().top).toString + 'px' 
0

Вы добавили свой css?

ОБНОВЛЕНО с цветом фона - jsFiddle

.dark { 
    background: #333; 
} 

.light { 
background: #fff; 
} 

.container { 
overflow: hidden; 
position: relative; 
min-height: 500px; 
padding: 1em; 
} 
.default { 
position: fixed; 
} 

.moveable { 
position: absolute; 
} 
Смежные вопросы