Question

我有一个包含6个不同列表元素的导航栏，如home，about等。当我们向下滚动所有部分时，我希望每个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;
        }

});

向下滚动页面时，幻灯片悬停在导航栏元素上

1 个答案: