我的main.js有一种奇怪的行为（也许这并不奇怪，我只是犯了一个愚蠢的错误。）
所以我得到了一个函数$(function(){...});，其中包含一些其他函数。看看我的代码：
$(function() {
// THIS FUNCTION DOES FIRE
setInterval(function() {
var active = $(".active").fadeOut(1000, function() {
$(this).removeClass('active');
});
if (active.next() && active.next().length) {
active.next().delay(1000).fadeIn(1000, function() {
$(this).addClass('active');
});
} else {
active.siblings(":first").delay(1000).fadeIn(1000, function() {
$(this).addClass('active');
});
}
}, 3000);
// THAT WORKS ASWELL
var sectionHeight = $(".welcome-page").outerHeight();
$(".abilities-page").css('height', sectionHeight);
$(".portfolio-page").css('height', sectionHeight);
var titleAlign = sectionHeight / 2 - $(".sectiontitle").outerHeight() / 2;
$(".sectiontitle").css('padding-top', titleAlign);
$(".logo").addClass('logoVis');
// ALL OF THAT WORKS UNTIL HERE
// THIS WHOLE FUNCTION DOES NOT FIRE
$(function($) {
$(function() {
$(window).scroll(function() {
$('div.section').removeClass('most-visible').mostVisible().addClass('most-visible');
$(function() {
$(window).scroll(function(e) {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var vpHeight = $(window).height();
var scrollOffset = (vpHeight - sectionHeight) / 2;
$('html, body').animate({
scrollTop: $("div.most-visible").offset().top -
scrollOffset
}, 500);
}, 1000));
if ($(window).width() > 900) {
if ($(window).scrollTop() >=
$(document).height() -
$(window).height() - 20 || $(window).scrollTop() <= 20) {
$("footer").addClass('footerVis');
$(".logo").addClass('logoVis');
$('html, body').stop(true);
} else {
$("footer").removeClass('footerVis');
$(".logo").removeClass('logoVis');
}
} else {
$("footer").addClass('footerVis');
$(".logo").addClass('logoVis');
}
});
});
});
});
function getMostVisible($elements) {
var $element = $(),
viewportHeight = $(window).height(),
max = 0;
$elements.each(function() {
var visiblePx = getVisibleHeightPx($(this), viewportHeight);
if (visiblePx > max) {
max = visiblePx;
$element = $(this);
}
});
return $element;
}
function getVisibleHeightPx($element, viewportHeight) {
var rect = $element.get(0).getBoundingClientRect(),
height = rect.bottom - rect.top,
visible = {
top: rect.top >= 0 && rect.top < viewportHeight,
bottom: rect.bottom > 0 && rect.bottom < viewportHeight
},
visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rect.bottom;
} else if (height > viewportHeight && rect.top < 0) {
var absTop = Math.abs(rect.top);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
return visiblePx;
}
});
// THAT WORKS ASWELL
$("#item1").animatedModal({
modalTarget: 'animatedModal1',
overflow: 'hidden',
color: 'rgba(255,255,255,0.8);'
});
});
正如您所看到的，我添加了一些注释来标记，哪些部分可以正常工作，哪些部分无效。它只是一个功能，不起作用。
要查看我的完整网站或所属的CSS，HTML等代码，请转到：
提前感谢您的帮助！
答案 0 :(得分：1)
不确定它是否有帮助，但我发现嵌套窗口滚动事件绑定存在问题。也许尝试这个版本没有所有额外的$（函数）（）和没有嵌套的window.on（'scroll'）
$(function() {
var $window = $(window);
var $footer = $("footer");
var $logo = $(".logo");
// THIS FUNCTION DOES FIRE
setInterval(function() {
var active = $(".active").fadeOut(1000, function() {
$(this).removeClass('active');
});
if (active.next() && active.next().length) {
active.next().delay(1000).fadeIn(1000, function() {
$(this).addClass('active');
});
} else {
active.siblings(":first").delay(1000).fadeIn(1000, function() {
$(this).addClass('active');
});
}
}, 3000);
// THAT WORKS ASWELL
var sectionHeight = $(".welcome-page").outerHeight();
$(".abilities-page").css('height', sectionHeight);
$(".portfolio-page").css('height', sectionHeight);
var titleAlign = sectionHeight / 2 -
$(".sectiontitle").outerHeight() / 2;
$(".sectiontitle").css('padding-top', titleAlign);
$logo.addClass('logoVis');
// ALL OF THAT WORKS UNTIL HERE
// THIS WHOLE FUNCTION DOES NOT FIRE
$window.scroll(function() {
$('div.section').removeClass('most-visible').mostVisible().addClass('most-visible');
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var vpHeight = $window.height();
var scrollOffset = (vpHeight - sectionHeight) / 2;
$('html, body').animate({
scrollTop: $("div.most-visible").offset().top -
scrollOffset
}, 500);
}, 1000));
if ($window.width() > 900) {
if ($window.scrollTop() >=
$(document).height() -
$window.height() - 20 || $(window).scrollTop() <= 20) {
$footer.addClass('footerVis');
$logo.addClass('logoVis');
$('html, body').stop(true);
} else {
$footer.removeClass('footerVis');
$logo.removeClass('logoVis');
}
} else {
$footer.addClass('footerVis');
$logo.addClass('logoVis');
}
});
function getMostVisible($elements) {
var $element = $(),
viewportHeight = $(window).height(),
max = 0;
$elements.each(function() {
var visiblePx = getVisibleHeightPx($(this), viewportHeight);
if (visiblePx > max) {
max = visiblePx;
$element = $(this);
}
});
return $element;
}
function getVisibleHeightPx($element, viewportHeight) {
var rect = $element.get(0).getBoundingClientRect(),
height = rect.bottom - rect.top,
visible = {
top: rect.top >= 0 && rect.top < viewportHeight,
bottom: rect.bottom > 0 && rect.bottom < viewportHeight
},
visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rect.bottom;
} else if (height > viewportHeight && rect.top < 0) {
var absTop = Math.abs(rect.top);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
return visiblePx;
}
// THAT WORKS ASWELL
$("#item1").animatedModal({
modalTarget: 'animatedModal1',
overflow: 'hidden',
color: 'rgba(255,255,255,0.8);'
});
});
答案 1 :(得分：0)
所以我在评论的帮助下找到了@Morpheus和@yezzz的问题。问题是我不小心从JS中删除了一条重要的一行：
$.fn.mostVisible = function() {
return getMostVisible(this);
}
再次从my codepen添加并删除
body,html{
overflow-x:hidden;
}
做了诀窍:)感谢所有人的帮助！