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

Answer 1

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>

Answer 2

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>