Страница прокрутки, которая показывает заголовок раздела и может перейти в следующий или предыдущий раздел

Question

Я создаю веб-сайт портфолио и использую разделы на моей целевой странице. Мне нравится иметь фиксированный скроллер на левом сайте на моей странице. Скроллер содержит стрелку вверх, стрелку вниз и между стрелками должен быть заголовок раздела. Вы можете найти макет скроллера здесь.

$(function(){
    
    var pagePositon = 0,
        sectionsSeclector = '.area',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;
    
    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',upPos);
    
    //Move on click:
    $('.scrollerwrap div').click(function(e){
        if ($(this).hasClass('arrowdown') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('arrowup') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({ 
                scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
            return false;
        }
    });
    
    //Update position func:
    function upPos(){
    var fromTop = $(this).scrollTop();
    var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
        });
    if ($cur != null && pagePositon != $cur.data('pos')) {
        pagePositon = $cur.data('pos');
    }                   
    }
    
});

.scrollerwrap {position: fixed; left: 60px; top: 50%; display: block; text-align: center; margin-top: -103px;}

.sectiontext {display: inline-block;margin-left: -4px;-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform-origin: center center;-moz-transform-origin: center center;-ms-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;}

.arrow {cursor: pointer; margin: 30px 0}
.area {width: 100%; height: 600px;}
.Header {background: red;}
.Aboutus {background: blue;}
.Service {background: orange;}
.Projects {background: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="scrollerwrap">
    <div class="arrow arrowup">up</div>
    <div class="sectiontext"><p>Section Title</p></div>
    <div class="arrow arrowdown">down</div>
</div>
<div class="area Header"></div>
<div class="area Aboutus"></div>
<div class="area Service"></div>
<div class="area Projects"></div>

Это хорошо сработало для стрелок, но я понятия не имею, как изменить заголовок раздела для каждого раздела.

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

Большое спасибо уже!

Answer 1

Я смог сам разобраться в проблеме. Как я уже догадался, это работает с атрибутами данных. Вот код:

$(function(){
    
    var pagePositon = 0,
        sectionsSeclector = '.area',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;
    
    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',upPos);
    // Load the right position name when window is loaded
    $(window).bind('load',upPos);
    
    //Move on click:
    $('.scrollerwrap div').click(function(e){
        if ($(this).hasClass('arrowdown') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('arrowup') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({ 
                scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
            return false;
        }
    });
    
    //Update position func:
    function upPos(){
      var fromTop = $(this).scrollTop();
      var $cur = null;
      var $areaname = $.map($('.area'), function(el) {
          return {name: 'areaname', value: $(el).data('areaname')}
      });

      $scrollItems.each(function(index,ele){
          if ($(ele).offset().top < fromTop + offsetTolorence){
            $cur = $(ele);
            $areaname = $(ele);
            $('.sectiontext').html('<p>' + $areaname[0].dataset.areaname + '</p>');
          }
      });

      if ($cur != null && pagePositon != $cur.data('pos')) {
          pagePositon = $cur.data('pos');
      }                   
    }
    
});

.scrollerwrap {position: fixed; left: 60px; top: 50%; display: block; text-align: center; margin-top: -103px;}

.sectiontext {display: inline-block;margin-left: -4px;-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform-origin: center center;-moz-transform-origin: center center;-ms-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;}

.arrow {cursor: pointer; margin: 30px 0}
.area {width: 100%; height: 600px;}
.Header {background: red;}
.Aboutus {background: blue;}
.Service {background: orange;}
.Projects {background: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="scrollerwrap">
    <div class="arrow arrowup">up</div>
    <div class="sectiontext"><p>Section Title</p></div>
    <div class="arrow arrowdown">down</div>
</div>
<div class="area Header" data-areaname="Header"></div>
<div class="area Aboutus" data-areaname="About us"></div>
<div class="area Service" data-areaname="Service"></div>
<div class="area Projects" data-areaname="Projects"></div>