2
\$\begingroup\$

I need an advice on who to write better code. I have a side navigation where there are 4 markers that appear every time I scroll to specific section on the page, the code is working well but it is very long and not flexible, I would like to learn how to write it as modular in which i can reuse it (the library I am using is waypoint js ) HTML code

<div class="summary-line" id="summary-line">
  <ul>
    <li class="track-nav-first hide">
      <span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
      <span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
      <span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    </li>
    <li class="track-nav-second hide">
      <span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
      <span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
      <span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    </li>
    <li class="track-nav-third hide">
      <span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
      <span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
      <span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    </li>
    <li class="track-nav-fourth hide">
      <span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
      <span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
      <span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    </li>
  </ul>
</div>

<section id="our-story" class="main-container">
<section id="how" class="main-container">
<section id="collection" class="main-container">
<section id="contact" class="main-container">

jQuery script

jQuery(document).ready(function($) {

// waypoint code for navigation marker
    var ourstory = $('#our-story').waypoint({
        handler: function(direction) {
            if (direction == 'down') {
                $(".track-nav-first").addClass("show-our-story");
            }else {
                $(".track-nav-first").removeClass("show-our-story");
            }
        }
    });
    var how = $('#how').waypoint({
        handler: function(direction) {
            if (direction == 'down') {
                $(".track-nav-second").addClass("show-our-story");
            }else {
                $(".track-nav-second").removeClass("show-our-story");
            }
        }
    });
    var how = $('#collection').waypoint({
        handler: function(direction) {
            if (direction == 'down') {
                $(".track-nav-third").addClass("show-our-story");
            }else {
                $(".track-nav-third").removeClass("show-our-story");
            }
        }
    });
    var how = $('#contact').waypoint({
        handler: function(direction) {
            if (direction == 'down') {
                $(".track-nav-fourth").addClass("show-our-story");
            }else {
                $(".track-nav-fourth").removeClass("show-our-story");
            }
        }
    });

});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.