Отслеживание текущего раздела и размещение в строковом формате

Question

Добрый день,

Я изо всех сил пытаюсь сделать последний бит на моем сайте, я почти на месте, но я выдергиваю волосы, я смотрю на это в течение многих дней и не могу понять, где я иду не так.

Я использую кнопки вверх и вниз для вызова JQuery Script, который загружает следующий раздел или предыдущий раздел.

Это код JQuery.

    <script>

function getCurrentSection () {
    var cutoff = $(window).scrollTop();
    var curIndex = 0;
    for(var index = 0; index < $('section').length; index++){
        if ($('section').eq(index).offset().top >= cutoff) {
            curIndex = index;
            break;
        }
    }
    return curIndex;
};

$( document ).ready(function() {

      var curIndex = getCurrentSection();
      curIndex += curIndex +1;
      var maxSec = $('section').length;

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

});

$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    var maxSec = $('section').length;

        document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

    if (curIndex === 0) { return; }
    $('html, body').animate({ scrollTop: ($('section').eq(curIndex-1).offset().top - 1)},500);


});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    var maxSec = $('section').length;

     document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

    if (curIndex === $('section').length) { return; }
    var cutoff = $(window).scrollTop();
    if ($('section').eq(curIndex).offset().top !== cutoff+1) { curIndex = curIndex-1; } /* Check if the current section is at the top of the page or has been scrolled */

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex+1).offset().top - 1)},500);

});

</script>

Он вызывается моим списком, а вот код, который вызывает JQuery.

    <ul class="list-group fixed-pagination">
      <li class="list-group-item pagButton"><a href="#" id="scrollWindowUp"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a></li>

  <li class="list-group-item pagButton"><p id="sectionText"></p></li>

  <li class="list-group-item pagButton"><a href="#" id="scrollWindowDown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
</ul>

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

Он почти у цели и получает максимальное количество разделов, но когда я нажимаю вверх и вниз, он сходит с ума от текущего номера раздела, и когда страница первоначально загружается, я также хочу сказать, что текущий раздел будет 1.

Надеюсь, вы можете помочь мне и увидеть, где я иду не так, моя текущая страница - http://diosa.smudgehost.co.uk, и вы можете увидеть, чего я достиг и что происходит на странице.

Спасибо

Answer 1

Мне удалось это исправить самостоятельно, я исправил это, изменив код на этот случай, если кто-нибудь захочет его использовать.

var CurSect = getCurrentSection();
var CurNum = CurSect+1;
var MaxSect = $('section').length;

$( document ).ready(function() {

document.getElementById("sectionText").innerHTML = CurNum.toString() + " / " + MaxSect.toString();
});

function getCurrentSection () {
    var cutoff = $(window).scrollTop();
    var curIndex = 0;
    for(var index = 0; index < $('section').length; index++){
        if ($('section').eq(index).offset().top >= cutoff) {
            curIndex = index;

            break;
        }
    }
    return curIndex;

};


$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();

    if (curIndex === 0) { return; }

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + MaxSect.toString();

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex-1).offset().top - 1)},500);

});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();

    if (curIndex === $('section').length) { return;  }


    var cutoff = $(window).scrollTop();
    if ($('section').eq(curIndex).offset().top !== cutoff+1)
    { 
        curIndex = curIndex-1; 
    } /* Check if the current section is at the top of the page or has been scrolled */

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex+1).offset().top - 1)},500);

    curIndex+=2;

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + MaxSect.toString();

});