我有一个JS文件,我尝试通过Jquery向其添加视差功能,但它似乎不起作用,也破坏了整个文件的功能。
我想知道我是否在某处打错了字或是否有其他原因导致此问题。
这是我的JS文件(可以正常运行):
// This enables bootstrap tooltips.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Fades out (and dismisses) bootstrap alerts after 5 seconds.
window.setTimeout(function() {
$('.alert').fadeTo(500, 0, function(){
$(this).remove();
});
}, 5000);
// Use this instead of href="javascript:void(0);" to avoid violating the Content Security Policy on CSP-enabled HTTPS.
// This prevents the empty link from scrolling to the top of the page AND from adding a # to the URL.
$('a[href="#"]').click(function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
});
// Hides the navbar when scrolling down and reveals it when scrolling up.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('navbar').style.top = '0';
} else {
document.getElementById('navbar').style.top = '-56px';
}
prevScrollpos = currentScrollPos;
}
这是事情变得凌乱的地方:
// Creates a parallax effect for the home page.
var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if (wScroll <= pContainerHeight) {
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
});
}
)};
// Expands recipe cards animation when in viewport
$(window).scroll(function() {
var hT = $('#recipeStack').offset().top,
hH = $('#recipeStack').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('#recipeStack img:nth-child(4)').css({
'transform' : 'translate(160px, -160px)'
'opacity' : '1'
});
$('#recipeStack img:nth-child(3)').css({
'transform' : 'translate(120px, -120px)'
'opacity' : '.8'
});
$('#recipeStack img:nth-child(2)').css({
'transform' : 'translate(80px, -80px)'
'opacity' : '.6'
});
$('#recipeStack img:nth-child(1)').css({
'transform' : 'translate(40px, -40px)'
'opacity' : '.4'
});
}
});
我认为问题出在此代码内:
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
});
我是否通过
'translate(0px, '+ wScroll /2 +'%)'
正确添加了变量? 最佳答案
您在元组中缺少“,”
$('#recipeStack img:nth-child(3)').css({
'transform' : 'translate(120px, -120px)',
'opacity' : '.8'
});
我只需要复制并粘贴到Sublime即可查看问题
您错过了最后一个
)}
的命令,当我发现我的项目也遇到了同样的问题时,这令我有些笑(==))var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if (wScroll <= pContainerHeight) {
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
});
}
});
关于javascript - 我将整个JS文件放在无法单独使用的新函数中后无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55761744/