Как сделать этот код более динамичным и функциональным?

Question

Я делаю jQuery функцию, которая добавляет класс «активный» к блоку в стороне при прокрутке к связанному блоку в другом блоке.
Код работает, но я хочу сделать его более динамичным c и функционально.

if ($('.reglementation .nav.nav-pills').length > 0) {
  $(window).scroll(function() {

    var screenPosition = $(document).scrollTop() + 20;

    if (screenPosition >= $('#tab272').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab272"]').addClass('active');
    }

    if (screenPosition >= $('#tab275').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab275"]').addClass('active');
    }

    if (screenPosition >= $('#tab278').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab278"]').addClass('active');
    }

    if (screenPosition >= $('#tab285').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab285"]').addClass('active');
    }

    if (screenPosition >= $('#tab290').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab290"]').addClass('active');
    }

    if (screenPosition >= $('#tab300').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab300"]').addClass('active');
    }
    if (screenPosition >= $('#tab377').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab377"]').addClass('active');
    }

  });
}

Answer 1

$(window).scroll(function() {

    var screenPosition = $(document).scrollTop() + 20;
    var currentTab = null;

    $(document).find('*[id^="tab"]').each(function(){
        if ( screenPosition >= $(this).offset().top ){
            currentTab = $(this);
        }
    });

    $('ul.nav').find('a.active').removeClass('active');
    $('ul.nav').find('a[href="#' + currentTab.attr('id') + '"]').addClass('active');
}

Вы можете найти currentTab, сравнив смещение каждой вкладки с screenPosition. Затем удалите активный класс из текущего и добавьте класс в новый элемент.

Answer 2

1. Вместо ввода ID для каждой вкладки просто один CSS класс для всех тегов

2. Напишите код, который будет определять положение для всех Вкладки в одной l oop и для того, что удовлетворяет условию, делают его активным

этот метод сделает код менее 6 строк

Пример

  var screenPosition = $(document).scrollTop() + 20;
  $.each($('[id^="tab"]'), function(index, value) {
       if (screenPosition >= $(value).offset().top) {
         $('ul.nav li').parent().find('a.active').removeClass('active');
         $('ul.nav li a[href="#' + $(value).attr("id") + '"]').addClass('active');
       }
  });

Я думаю, этого 6-строчного кода достаточно

Answer 3

Следующий код находит индекс i первой вкладки, который на дальше , чем позиция экрана, и выбирает вкладку , предшествующую ей.

Если после позиции экрана нет вкладки, используется индекс последней вкладки.

const articles = ['#one', '#two', '#three']

function onScroll() {
  const screenPos = window.pageYOffset + 20
  const i = articles.findIndex((el) => $(el).offset().top > screenPos)
  const j = (i === -1) ? articles.length-1 : i-1
  const previous = $('nav a.active')
  const current = $(`nav a[href="${articles[j]}"]`)
  if(current[0] === previous[0]) return
  $('nav').find('a.active').removeClass('active')
  $(`nav a[href="${articles[j]}"]`).addClass('active')
}

window.addEventListener('scroll', onScroll)
onScroll()

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
nav {
  width: 100px;
  height: 135px;
  position: fixed;
  top: 20px;
  left: 350px;
  z-index: 1;
}
article {
  width: 330px;
  height: 600px;
  box-shadow: 0 0 0 1px silver inset;
  padding: 10px;
  margin-left: 5px;
}
nav a.active {
  background-color: rgba(0,200,200,1);
}
nav a {
  color: black;
  margin: 0 0 5px 0;
  font-size: 1rem;
  line-height: 40px;
  text-align: center;
  width: 100px;
  height: 40px;
  box-shadow: 0 0 0 1px silver inset;
  border-radius: 5px;
  display: inline-block;
  text-decoration: none;
  transition: background-color .5s ease-out 0s
}
main {
  position: absolute;
  top: 20px;
  z-index: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
</nav>
<main>
<article id="one">Article 1</article>
<article id="two">Article 2</article>
<article id="three">Article 3</article>
</main>

Answer 4

надеюсь, что это поможет проверить # счастливое кодирование ?

var screenPosition = $(document).scrollTop() + 20;
var tabs = ['#tab275', '#tab278']; // list your tabs

//add and remove the classes in function

function removeAddClass(tab) {
if (screenPosition >= $(tab).offset().top) {
    $('ul.nav li').parent().find('a.active').removeClass('active');
    $('ul.nav li a[href="' + tab + '"]').addClass('active');
  }
}
if ($('.reglementation .nav.nav-pills').length > 0) {
$(window).scroll(function () {
    // loop over the tabs 
    //and set each tab to be handeld by 
    //the removeAddClass functio
    tabs.forEach(function (tab) {
        removeAddClass(tab);
        console.log(tab);
    });
});
}