Question

我试图用简单的jquery做一个很好的滚动效果。但它不起作用。它在测试环境中使用完全相同的代码。

当我打开页面时似乎加载了代码，并且控制台中没有错误。我不清楚可能导致这种情况的原因。

它适用于codepen：http://codepen.io/anon/pen/KzOKYM?editors=1111

SASS（未编译）和JS：

$(window).scroll(function() {
  youtubeVidScroll();
});


function youtubeVidScroll() {

  var wScroll = $(window).scrollTop();

  $(".video-strip").css("background-position": "calc(50% - " + wScroll + "px) center");
}

// SASS
.video-strip
  width: 100%
  height: 100%
  position: absolute
  background:
  image: url(../images/video-strip.png)
  repeat: repeat-x
  size: 400%
  background-position: calc(50% - 0px) center

https://github.com/DatScreamer/Screamer-Portfolio

修改

此时我已经从我的文件中删除了所有内容，只有我在codepen上的内容，但它仍然无法正常工作。我现在知道我的javascript不是问题，但在连接JS和阅读它的浏览器之间的某个地方。我把一个简单的jquery东西放进去，它甚至都不起作用。（.hide（））

Answer 1

问题最终在_base.sass中的overflow: hidden上html, body，这个文件没有太大用处，因为它是个人样板文件......一旦删除它就有效了。我甚至不记得在_base.sass中添加溢出属性。

感谢评论中的提示，他们在哪里删除......

PS。我认为这是一个很好的问题，因为JS的初学者可能不知道溢出会阻止滚动和其他效果。

滚动时添加到CSS calc

1 个答案: