无法使jQuery的find在视口中工作。

10 浏览
0 Comments

无法使jQuery的find在视口中工作。

我知道如何使用jQuery找出元素是否在视口中可见的问题已经有人回答过了，但是我在让它适用于我的情况上遇到了困难。我使用的基于其他答案的jQuery代码是：\n

jQuery(document).ready(function() {
$(window).scroll(function() {
var top_of_element = $(".basic-box1").offset().top;
var bottom_of_element = $(".basic-box1").offset().top + $(".basic-box1").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
   $('.basic-box1').fadeIn();
}
else {
   $('.basic-box1').fadeOut();
}  
});
});

\nHtml:\n

 
  
文本文本文本

\nCSS:\n

.basic-box1 {
  背景颜色：古董白;
  边框：实线;
  边框宽度：2像素;
  填充：40像素;
  外边距：自动;
  宽度：50%;
  下外边距：700像素;
  上外边距：800像素;
}

\n我觉得我可能漏掉了一些明显的东西。我尝试了我所知道的一切，但是无法让它工作。任何帮助将不胜感激。\n如果你想在我的网站上看到它的话，可以访问http://www.claywhaley.com。

0

1 答案

0 Comments

您的网站控制台出现错误`$ is not a function`，这是由于WordPress引起的。请查看这里。

谢谢您的回答。我已经解决了这个问题，但是看起来盒子在实际进入视口之前就已经淡入了。当我加载包含盒子的屏幕时，它是隐藏的，然后我滚动它才淡入。所以我知道它是在工作的，但它只是在我滚动到盒子所在的位置之前就发生了。对于如何解决这个问题，有什么想法吗？代码与上面相同。

您可以在claywhaley.com上查看它。它位于“how it works”之后的第一个盒子。

好的，我知道我一直在评论，但这只是为了以防万一有人遇到与我相同的问题。我通过添加`var top_of_element = ($(".basic-box1").offset().top - 400);`来解决了这个问题。我认为边距和/或固定标题使位置偏移，所以减去400可以解决这个问题。

动态获取头部高度：var top_of_element = ($(".basic-box1").offset().top - $("header").height());

0