我还是一个编码新手,因此我似乎无法修复这个错误,因此陷入了停滞。我正在开发我的个人网站 http://yeemachine.com它有一个粘性导航栏,当达到滚动顶部函数中的某个阈值时,它会更改其“html 内容”。
这是我用来加载初始函数的。当它尝试加载 var=pdr 或 .class2 的高度时,就会出现该错误。 .class2 是一个 div,其中包含使用 Masonry.js 设置的图像。有时是碰运气。大多数情况下,在第一次加载时,它会将 div 的高度指定为 2000+ px,如果所有图像都堆叠在一起,这将是高度。
$(window).load(function() {
var mn = $(".main-nav");
var mns = "main-nav-scrolled";
var hdr = $('#container').height();
var pdr = $('.class2').height();
var gdr = $('.class1').height();
var sdr = $('.hundred').height();
console.log(gdr);
console.log(pdr);
var windowPosY = $(this).scrollTop();
$(window).scroll(function() {
if($(this).scrollTop() > (hdr*.85) && windowPosY < (hdr+(gdr)))
{
mn.addClass(mns);
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Design<br><i class='fa fa-chevron-down'></i>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() < (hdr*.85) && windowPosY ){
mn.removeClass(mns);
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up hideicon'></i><br>Richard<br>Yee<br><i class='fa fa-chevron-down'></i>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() > (hdr+gdr) && windowPosY < (hdr+gdr+pdr)){
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Painting?<br><i class='fa fa-chevron-down'></i>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() > (hdr+gdr+pdr) && windowPosY < (hdr+gdr+pdr+sdr)){
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Sound<br><i class='fa fa-chevron-down hideicon'></i>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
});
除了这个初始加载功能之外,我还有一个调整大小功能,可以在每次调整窗口大小时修复问题。
var resizeTimeout;
$(window).resize(function() {
clearTimeout(resizeTimeout);
resizeTimeout= setTimeout(doneResizing, 500);
});
doneResizing(); //trigger resize handling code for initialization
});
function doneResizing()
{
mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('#container').height();
gdr = $('.class1').height();
pdr = $('.class2').height();
sdr = $('.hundred').height();
$(window).scroll(function() {
var windowPosY = $(this).scrollTop();
console.log(gdr);
if($(this).scrollTop() > (hdr*.85) && windowPosY < (hdr+(gdr)))
{
mn.addClass(mns);
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Design<br><i class='fa fa-chevron-down'>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() < (hdr*.85) && windowPosY ){
mn.removeClass(mns);
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up hideicon'></i><br>Richard<br>Yee<br><i class='fa fa-chevron-down'>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() > (hdr+(gdr)) && windowPosY < (hdr+gdr+pdr)){
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Painting?<br><i class='fa fa-chevron-down'>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
if($(this).scrollTop() > (hdr+gdr+pdr) && windowPosY < (hdr+(gdr)+pdr+sdr)){
$( ".iconcontainer li a" ).html( "<i class='fa fa-chevron-up'></i><br>Sound<br><i class='fa fa-chevron-down hideicon'>" );
$( ".iconcontainer li a" ).css( "font-size", "10px" );
}
});
}
有没有办法在 div 中的所有图像加载后延迟/获取高度变量?我已经尝试了很多在 Stack 上看到的方法,但我想我无法正确实现它们。我不确定我的其他困惑的 JS 是否也影响它,使用 Masonry 来获取网格图像。这是其余的代码:https://github.com/yeemachine/yeemachine/blob/gh-pages/index.html
谢谢!
最佳答案
您可能是竞争条件的受害者。即,有时 masonry js 在代码运行之前完成大小调整,而有时则不会。
除非绝对必要,否则不要通过添加延迟来解决此问题。添加延迟并不能解决问题:它只会降低问题发生的可能性。相反,请在砌体告诉您代码已完成后运行您的代码。
看起来masonry js有一些events that you can hook into 。
我想看看在 layoutComplete
事件中运行您的代码是否可以解决您的问题。例如,类似:
// jQuery
var $grid = $('.grid').masonry({...});
function onLayout() {
/* YOUR CODE HERE */
}
// bind event listener
$grid.on( 'layoutComplete', onLayout );
关于javascript - 如何更可靠地从动态变化的元素中获取变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38088253/