javascript - 每个部分滚动时的 URL 和文本更改

Question

我有一个固定的链接，可以更改滚动条上每个部分的文本。不仅是文本，URL 也应该改变。有没有人知道如何最好地做到这一点？

我的代码:

$( document ).ready(function() {
    $(window).on("scroll resize", function () {
        var pos = $('.homeCaption').offset();
        $('.homeStage').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('.homeCaption').html($(this).find('.projectDescription').text());
                return; 
            }
        });
    });
    $(document).ready(function () {
        $(window).trigger('scroll');
    });
});

section{
  background-color: gray;
  height: 100vh;
  width: 100%;
}

.homeCaption {
	position:fixed;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	color: #fff;
	z-index: 999;
	font-size: 24px;
	text-align: center;
}

.green{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="homeStage">
  <div class="homeStageContent">
	  <p class="projectDescription" style="display: none;">Hello</p>
  </div>
</section>

<section class="homeStage green">
  <div class="homeStageContent">
	  <p class="projectDescription" style="display: none;">Hell2o</p>
  </div>
</section>

<a class="homeCaption" href="#"></a>

fiddle 链接: https://jsfiddle.net/8zf2d2ah/3/

感谢您的帮助:)

Answer 1

Working fiddle .

您可以简单地使用 data-* 属性为每个 .projectDescription 元素存储 href，例如:

<section class="homeStage">
  <div class="homeStageContent">
    <p class="projectDescription" data-href="link1" style="display: none;">Hello</p>
  </div>
</section>

<section class="homeStage green">
  <div class="homeStageContent">
    <p class="projectDescription" data-href="link2" style="display: none;">Hell2o</p>
  </div>
</section>

<a class="homeCaption" href="#"></a>

然后在 js 部分使用 data() 获取此属性并使用 prop() 设置 href，例如:

if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
    var projectDescription = $(this).find('.projectDescription');
    $('.homeCaption').html(projectDescription.text());
    $('.homeCaption').prop('href',projectDescription.data('href'));

    return; 
}

希望这对您有所帮助。

$(document).ready(function() {
  $(window).on("scroll resize", function() {
    var pos = $('.homeCaption').offset();
    $('.homeStage').each(function() {
      if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
        var projectDescription = $(this).find('.projectDescription');
        $('.homeCaption').html(projectDescription.text());
        $('.homeCaption').prop('href', projectDescription.data('href'));
        return;
      }
    });
  });
  $(document).ready(function() {
    $(window).trigger('scroll');
  });
});

section {
  background-color: gray;
  height: 100vh;
  width: 100%;
  color: black;
}

.homeCaption {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 999;
  font-size: 24px;
  text-align: center;
}

.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="homeStage">
  <div class="homeStageContent">
    <p class="projectDescription" data-href="link1" style="display: none;">Hello</p>
  </div>
</section>

<section class="homeStage green">
  <div class="homeStageContent">
    <p class="projectDescription" data-href="link2" style="display: none;">Hell2o</p>
  </div>
</section>

<a class="homeCaption" href="#"></a>