Question

我希望将其简化为一小块代码，只需清理代码，不要重复自己。我有一个小项目，我正在进行，它有一个视差的事情，但在每个'视差'幻灯片之间有一个'白色'幻灯片。所以我在开始时有一个白色菜单按钮，但当它到达“白色”幻灯片时你无法看到它。所以我做了这个小功能。显然可能会更好。

function changeColor (){
  $(window).scroll(function(){
    var slide2Check = $('.slide2').offset().top-$(window).scrollTop();
    var slide3Check = $('.slide3').offset().top-$(window).scrollTop();
    var slide4Check = $('.slide4').offset().top-$(window).scrollTop();
    var slide5Check = $('.slide5').offset().top-$(window).scrollTop();

    if (slide2Check < 25 && slide3Check > 25 || slide4Check < 25 && slide5Check > 25 ) {
        $('.nav-button').css('border', '2px solid #407C73');
        $('.nav-button span').css('color', '#407C73');
    } else {
      $('.nav-button').css('border', '2px solid white');
      $('.nav-button span').css('color', 'white');
    }
  });
};

好的，所以我接受了你的两个建议并做了这个。你觉得怎么样？非常感谢！

var $window = $(window),
    $nav_button = $('.nav-button, .nav-button span'),
    allCheckedSlides = [],
    navIsColored = $nav_button.hasClass('nav-colored'),
    allSlides = $('section');

    function checkPosition(){

      var addColorClass = allCheckedSlides[1] < 25 && allCheckedSlides[2] > 25 || allCheckedSlides[3] < 25 && allCheckedSlides[4] > 25;

      for (var i = 0 ; i <= allSlides.length; i++){
        allCheckedSlides[i] = positionCheck($(allSlides[i]));
      }

      function positionCheck(x){
        if (!x.length){
            return 0;
          }
        return x.offset().top - $(window).scrollTop();
      };

      if ($nav_menu.hasClass('slide-in')){
        $nav_button.removeClass('nav-colored');
      } else if (addColorClass) {
              $nav_button.addClass('nav-colored');
      } else {
              $nav_button.removeClass('nav-colored');
          }
};

Answer 1

由于滚动事件每秒可以触发很多次，你可以做的最大改进就是将元素缓存到事件处理程序之外，这样你就不必经常搜索dom ......这是最昂贵的部分你的代码。

此外，如果已经进行了更改并且条件仍然相同，则无需进行额外的不必要的dom操作。

我还建议只需在导航按钮上切换一个类，然后使用css设置样式

// store all the elements once, instead of constantly searching the dom
var $window = $(window),
    $slide2 = $('.slide2'),
    $slide3 = $('.slide3'),
    $slide4 = $('.slide4'),
    $slide5 = $('.slide5'),
    $nav_button = $('.nav-button');

$window.scroll(function () {
    var slide2Check = $slide2.offset().top - $window.scrollTop(),
        slide3Check = $slide3.offset().top - $window.scrollTop(),
        slide4Check = $slide4.offset().top - $window.scrollTop(),
        slide5Check = $slide5.offset().top - $window.scrollTop(),
        addColorClass = slide2Check < 25 && slide3Check > 25 
                       || slide4Check < 25 && slide5Check > 25,
        navIsColored = $nav_button.hasClass('nav-colored');

    if (addColorClass) {
        // only make changes if they havn't already nbeen made
        if (!navIsColored) {
            $nav_button.addClass('nav-colored');
        }
    } else {
        if (navIsColored) {
            $nav_button.removeClass('nav-colored');
        }
    }

});

Answer 2

为幻灯片slide-even或slide-odd添加新的类选择器。我已经在代码中添加了注释来解释它的作用，它相对简单：

function changeColor (){
    $(window).scroll(function() {
        var slidesEven = $('.slide-even'); //will be an array of html results
        var slidesOdd = $('.slide-odd');  //will be an array of html results

        for (var i = 0; i < slidesEven.length; i++) {
            var slideEvenCheck = computeCheckVal($(slidesEven[i])); //must wrap slidesEven[i] in jQuery object to use offset and $ functionaltiy

            var slideOddCheck = 0;

            //**add a conditional check if even slides do not always have a complimentary slidesOdd[i]**
            if(slidesOdd.length -1 <= i)
                slideOddCheck = computeCheckVal($(slidesOdd[i])); //must wrap slidesOdd[i] in jQuery object to use offset and $ functionaltiy


            if (slideEvenCheck < 25 && slideOddCheck > 25) {
                $('.nav-button').css('border', '2px solid #407C73');
                $('.nav-button span').css('color', '#407C73');
            } else {
                $('.nav-button').css('border', '2px solid white');
                $('.nav-button span').css('color', 'white');
            }
        }
    });
};

function computeCheckVal($slide) {
    if (!$slide.length)
        return 0;

    return $slide.offset().top - $(window).scrollTop();
}

简化多个相似的变量

2 个答案: