I'm attempting to create a smooth scrolling effect using basic jquery, but it's not functioning as expected. Oddly enough, the exact same code works perfectly in a test environment.
When I load the page, the code appears to be loading properly and there are no errors in the console. However, I'm completely stumped as to what could be causing the issue.
You can see that it works in CodePen here: http://codepen.io/anon/pen/KzOKYM?editors=1111
The SASS (uncompiled) and JS code snippets are provided below:
$(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) centerhttps://github.com/DatScreamer/Screamer-Portfolio
EDIT:
Despite stripping down my files to only include the CodePen content, the scrolling effect still doesn't work. It's now apparent that the issue lies somewhere between linking the JS file and the browser actually reading it. Even a simple jQuery function like (.hide()) is failing to work.