Question

我正在尝试这个javascript滑动滚动效果，当一个对象滚动它时图像会改变颜色，并且我的所有代码与教程完全相同，除了javascript不会被激活？ This is the tutorial I used. 这是我的html：

<!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();

Answer 1

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

在这一行上你正试图

Int- int + string

这可能会导致问题，因此需要：

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

Answer 2

你添加了你的CSS吗？

使用背景颜色更新 - jsFiddle

 .dark { 
  background: #333;
 }

.light {
 background: #fff;
 }

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

.moveable {
 position: absolute;
}

Javascript不会开火吗？

2 个答案: