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>

链接到小提琴： https://jsfiddle.net/8zf2d2ah/3/

感谢您的帮助：）

Answer 1

<强> Working fiddle

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

<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; 
}

希望这有帮助。

＆＃13;

$(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');
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用html属性数据来存储您希望该部分具有的链接，然后将其添加到您的部分的src属性中。

$( 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 projDesc = $(this).find('.projectDescription');
                $('.homeCaption').html(projDesc.text());
                //This is new
                $('.homeCaption').attr('src', projDesc.data('link'));
                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">
      <!-- data-link is new -->
	  <p class="projectDescription" style="display: none;" data-link="www.google.com">Hello</p>
  </div>
</section>

<section class="homeStage green">
  <div class="homeStageContent">
	  <p class="projectDescription" style="display: none;" data-link="#">Hell2o</p>
  </div>
</section>

<a class="homeCaption" href="#"></a>

每个部分滚动的URL和文本都会更改

2 个答案: