URL and text change on scroll for each section

Question

I have a fixed link that will change its text for each section on scroll. Not only the text, but also the URL should change. Has anyone an idea of how best to do that?

My Code:

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

Link to fiddle: https://jsfiddle.net/8zf2d2ah/3/

Thanks for any help :)

In order to change the url you can use the answer for [this question](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — , Sep 26 '17 at 10:24
https://stackoverflow.com/questions/46423773/url-and-text-change-on-scroll-for-each-section — R-G, Mar 06 '20 at 18:16

Zakaria Acharki · Accepted Answer · 2017-09-26T10:27:53.473

Working fiddle.

You could simply use data-* attributes to store the href for every .projectDescription element, like :

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

Then in the js part get this attribute using data() and set the href using prop(), like :

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

Hope this helps.

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

is there a way to do this with images instead of text? – R-G Mar 06 '20 at 18:22 — R-G, Mar 06 '20 at 18:22

score 1 · Answer 2 · answered Sep 26 '17 at 10:29

You can use the html property data to store the link that you want that section to have and then add that into the src attribute of your a elment.

$( 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 and text change on scroll for each section

2 Answers2