Javascript 不会火?

标签 javascript jquery html css

我正在尝试这个 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();

最佳答案

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

在这条线上你正试图

Int- int + string

这可能会导致问题,因此需要:

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

关于Javascript 不会火?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26307130/

相关文章:

javascript - 没有填充的 ScrollMagic 持续时间

javascript - 由于元素中的空间,将数组元素拆分为更多元素

html - 在文本末尾放置绝对框(根据文本长度灵活调整)

html - CSS/Jquery 下拉子菜单定位糟糕

javascript - 无法使用 Kraken 的公共(public) Websocket API 建立握手

javascript - 传单标记点击显示数据在div中

javascript - 如何在 JavaScript 中停止事件冒泡?

javascript - 如何向 WooCommerce 结帐页面中的自定义选择框添加验证并应用 select2 样式。

javascript - 错误检测到多边形中的点

javascript - 如何为同一类的不同 li 设置不同的背景图像