Question

滚动到section.drk时，

更改徽标的颜色，但仅更改第一个section.drk，其余部分不更改。有人可以帮忙吗？

这是我在jQuery中的代码

$.hdchng = function () {
  var hubchng = $('.drk');
  var distance = hubchng.offset().top;
    $window = $(window);

  $window.scroll(function () {
    if ($window.scrollTop() >= distance) {
      $('.part1').addClass('darkmode');
      $('.part2,part4').addClass('greymode');
      $('.mngNv').addClass('menudrk');
    } else {
      $('.part1').removeClass('darkmode');
      $('.part2,part4').removeClass('greymode');
      $('.mngNv').removeClass('menudrk');
    }
  });
};
$.hdchng();

和html：

<section class="MNGwb drk"> <- it works here
</section>
<section class="MNGex"> <- it works here
</section>
<section class="MNGwb drk"> <- it doesn't work here
</section>

Answer 1

由于您没有包括整个HTML，因此我添加了一些div和一些CSS来进行演示。您的代码基本上可以正常工作。您只需要将点添加到.part4的选择器中即可。

$.hdchng = function () {
  var hubchng = $('.drk');
  var distance = hubchng.offset().top;
    $window = $(window);
  
  $window.scroll(function () {
    if ($window.scrollTop() >= distance) {
      $('.part1').addClass('darkmode');
      $('.part2, .part4').addClass('greymode');
      $('.mngNv').addClass('menudrk');
    } else {
      $('.part1').removeClass('darkmode');
      $('.part2, .part4').removeClass('greymode');
      $('.mngNv').removeClass('menudrk');
    }
  });
};
$.hdchng();

section {
  width: 100%;
  height: 600px;
  border: 1px solid blue;
  margin: 1em;
}
.part1, .part2, .part4 {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #eee;
}
.part1 {
  left: 0;
}
.part2 {
  left: 120px;
}
.part4 {
  left: 240px;
}
.darkmode {
  background-color: #333;
}
.greymode {
  background-color: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part1"></div>
<div class="part2"></div>
<div class="part4"></div>
<section class="MNGwb drk"> <!-- it works here -->
</section>
<section class="MNGex"> <!-- it works here -->
</section>
<section class="MNGwb drk"> <!-- it doesn't work here -->
</section>

Answer 2

看看这个片段。您应该能够将其调整为您的代码。我需要查看页面中的确切代码以提供更详细的建议。

var hubTopDistances = [];
var hubBtmDistances = [];
var i = 0;

$('section.drk').each(function(i,el) {
  hubTopDistances.push($(el).offset().top);
  hubBtmDistances.push($(el).offset().top + $(el).height());
});

var drkCount = hubTopDistances.length;

var breakpoint = {
	value: 0,
	reference: 'midScrn',
	set: function() {
  	    var v = calcDistances();
  	    breakpoint.value = v[breakpoint.reference];
        }
};

$(window).scroll(function () {
  breakpoint.set();
  $('.distanceToTop').text(parseInt(breakpoint.value));
  for (i = 0; i < drkCount; i++) {
  	if (breakpoint.value > hubTopDistances[i]) {
    	if (breakpoint.value < hubBtmDistances[i]) {
      	goDark();
        return;
      }
    }
  }
  goLight(); // If the function didn't return at goDark(), means we gotta goLight()
});

function goDark() {
	$('.distanceToTop').addClass('darkmode');
}
function goLight() {
  $('.distanceToTop').removeClass('darkmode');
}
function calcDistances() {
  var scrlTop = $(window).scrollTop();
  return {
      scrlTop: scrlTop,
      midScrn: scrlTop + ($(window).height() / 2),
      scrnBtm: scrlTop + $(window).height()
  }
}

section {
  height: 100vh;
}
.distanceToTop {
  position:fixed;
  top: 5px;
  right: 10px;
  width: 50px;
  height: 1.5em;
  border: 1px solid purple;
  text-align:right;
  padding: 0 5px;
}
.layout {
  position:relative;
}
.darkmode {
  background-color: navy;
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layout">
  <div class="distanceToTop">

  </div>
  <section class="MNGwb drk"> Section 1
  </section>
  <section class="MNGex"> Section 2
  </section>
  <section class="MNGwb drk"> Section 3
  </section>
</div>

jQuery-滚动到section.drk时更改徽标的颜色

2 个答案: