幻灯片悬停在您向下滚动

Question

页面

我有6个不同的列表元素就像家里导航栏，约等 我希望每个这个li元素的徘徊，我们在所有的部分向下滚动。 我已经使用ISVISIBLE功能，它告诉我，如果一节中视可见或不可见....它的工作，但在同一时间两个列表元素有悬停效果，只要这两个部分是在同一时间看到...如何解决这个问题。即使两个部分在视口中，我如何只能创建一个悬停的列表元素？

以下是代码

$(document).ready(function(){ 


    $.fn.isVisible = function() { 

    var rect = this[0].getBoundingClientRect(); 
    return (
     (rect.height > 0 || rect.width > 0) && 
     rect.bottom >= 0 && 
     rect.right >= 0 && 
     rect.top <= (window.innerHeight ||  document.documentElement.clientHeight) && 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
    }; 



    $(window).scroll(function(){ 

    if(("#aboutus").isVisible()) 
    { 
     $(".aboutL").addClass("hoverEffect"); 
    } 
    else{ 
     $(".aboutL").removeClass("hoverEffect"); 
    } 

    }); 

}); 

Answer 1

保存，如果你的元素之一具有已分配的效果，并决定开在下单时使用此值：事情是这样的

var oneElementHasHoverEffect = 0; 

$(window).scroll(function(){ 

    if(("#aboutus").isVisible()) 
     { 
      if(oneElementHasHoverEffect == 0){ 
        $(".aboutL").addClass("hoverEffect"); 
        oneElementHasHoverEffect = 1; 
      } 
     }else{ 
      $(".aboutL").removeClass("hoverEffect"); 
       oneElementHasHoverEffect = 0; 
     } 

    if(("#home").isVisible()) 
     { 
      if(oneElementHasHoverEffect == 0){ 
        $(".homeL").addClass("hoverEffect"); 
        oneElementHasHoverEffect = 1; 
       } 
     }else{ 
      $(".homeL").removeClass("hoverEffect"); 
       oneElementHasHoverEffect = 0; 
     } 

});