ページのどの部分が表示されるかに応じてJQuery UIスライダーを更新します。

Question

window.location.hashを使用してページをナビゲートする作業用JQuery UIスライダーがあります。問題は、ユーザーがスクロールするときに、divがページ上にあるかどうかに応じて、スライダが更新されるところの別の方法で動作したいということです。

var slider = $('#slider');  

    $(function() { 
     slider.slider({ 
      orientation: "vertical", 
      min: 1, 
      max: 14, 
      value: 14, 
      change: function(event, ui) { 

       window.location.hash = 'eraOne'; 
       var value = slider.slider('value'); 

       if(value >= 14) { 
        window.location.hash = 'eraOne'; 
       } 

       else if (value == 13) { 
        window.location.hash = 'eraTwo'; 
       } 

       else if (value == 12) { 
        window.location.hash = 'eraThree'; 
       } 

       else if (value == 11) { 
        window.location.hash = 'eraFour'; 
       } 

       else if (value == 10) { 
        window.location.hash = 'eraFive'; 
       } 

       else if (value == 9) { 
        window.location.hash = 'eraSix'; 
       } 

       else if (value == 8) { 
        window.location.hash = 'eraSeven'; 
       } 

       else if (value == 7) { 
        window.location.hash = 'eraEight'; 
       } 

       else if (value == 6) { 
        window.location.hash = 'eraNine'; 
       } 

       else if (value == 5) { 
        window.location.hash = 'eraTen'; 
       } 

       else if (value == 4) { 
        window.location.hash = 'eraEleven'; 
       } 

       else if (value == 3) { 
        window.location.hash = 'eraTwelve'; 
       } 

       else if (value == 2) { 
        window.location.hash = 'eraThirteen'; 
       } 

       else if (value == 1) { 
        window.location.hash = 'eraFourteen'; 
       }; 
       }, 
       }); 
      }); 

Answer 1

まず、ドキュメントスクロールイベントを聴いた。そのようなイベントごとに、最後の目に見えない要素がどれかを調べるために要素をループします（position().topが文書scrollTopよりも高い場合）。私はその男を見つけると、私はあなたの反転を行い、スライダの値を設定します。

次に、スライダ変更リスナーが起動します。だから、私は彼が手渡されていることさえ聞く必要があります。手動でトリガされたイベントの場合（上記のロジックから）、私は単に戻ってきます。重要：すぐに返ってこない場合は、トリガーの無限ループに巻き込まれます！

var slider = $('#slider'); 
 
$(document).on('scroll', function() { 
 
    var currentScrollTop = $(this).scrollTop(); 
 
    var scrollToSpacer = 1; 
 
    $('.spacer').each(function(i, v) { 
 
    var spacer = $(v); 
 
    if(spacer.position().top <= currentScrollTop) 
 
     scrollToSpacer = spacer.text(); 
 
    }); 
 
    // last value assigned to scrollToSpacer is what we should set the slider value to 
 
    slider.slider('option', 'value', 14-parseInt(scrollToSpacer)); 
 
}); 
 
$(function() { 
 
    slider.slider({ 
 
     orientation: "vertical", 
 
     min: 1, 
 
     max: 14, 
 
     value: 14, 
 
     change: function(event, ui) { 
 
      if(!event.hasOwnProperty('cancelable')) // triggered programatically 
 
       return; 
 

 
      window.location.hash = 'eraOne'; 
 
      var value = slider.slider('value'); 
 

 
      if(value >= 14) { 
 
       window.location.hash = 'eraOne'; 
 
      } 
 

 
      else if (value == 13) { 
 
       window.location.hash = 'eraTwo'; 
 
      } 
 

 
      else if (value == 12) { 
 
       window.location.hash = 'eraThree'; 
 
      } 
 

 
      else if (value == 11) { 
 
       window.location.hash = 'eraFour'; 
 
      } 
 

 
      else if (value == 10) { 
 
       window.location.hash = 'eraFive'; 
 
      } 
 

 
      else if (value == 9) { 
 
       window.location.hash = 'eraSix'; 
 
      } 
 

 
      else if (value == 8) { 
 
       window.location.hash = 'eraSeven'; 
 
      } 
 

 
      else if (value == 7) { 
 
       window.location.hash = 'eraEight'; 
 
      } 
 

 
      else if (value == 6) { 
 
       window.location.hash = 'eraNine'; 
 
      } 
 

 
      else if (value == 5) { 
 
       window.location.hash = 'eraTen'; 
 
      } 
 

 
      else if (value == 4) { 
 
       window.location.hash = 'eraEleven'; 
 
      } 
 

 
      else if (value == 3) { 
 
       window.location.hash = 'eraTwelve'; 
 
      } 
 

 
      else if (value == 2) { 
 
       window.location.hash = 'eraThirteen'; 
 
      } 
 

 
      else if (value == 1) { 
 
       window.location.hash = 'eraFourteen'; 
 
      }; 
 
     }, 
 
    }); 
 
});

#slider { 
 
    position: fixed; 
 
    top: 3em; 
 
    right: 1em; 
 
} 
 
.spacer { 
 
    display: block; 
 
    margin: 3em 0; 
 
    background-color: red; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="slider"></div> 
 
<div class="spacer" id="eraOne">1</div> 
 
<div class="spacer" id="eraTwo">2</div> 
 
<div class="spacer" id="eraThree">3</div> 
 
<div class="spacer" id="eraFour">4</div> 
 
<div class="spacer" id="eraFive">5</div> 
 
<div class="spacer" id="eraSix">6</div> 
 
<div class="spacer" id="eraSeven">7</div> 
 
<div class="spacer" id="eraEight">8</div> 
 
<div class="spacer" id="eraNine">9</div> 
 
<div class="spacer" id="eraTen">10</div> 
 
<div class="spacer" id="eraEleven">11</div> 
 
<div class="spacer" id="eraTwelve">12</div> 
 
<div class="spacer" id="eraThirteen">13</div> 
 
<div class="spacer" id="eraFourteen">14</div> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>