根据显示的页面部分更新JQuery UI滑块

Question

我有一个工作的JQuery UI滑块，可以使用window.location.hash导航页面。问题是我还希望它以相反的方式工作，滑块更新取决于用户滚动时页面上的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）。找到那个人后，我进行反转，然后设置滑块值。

接下来，滑块更改侦听器将FIRE。所以，即使他被交给我，我也必须听。如果它是一个手动触发的事件（来自上面的逻辑），那么我就回来了。重要提示：如果您不立即返回，您将陷入无限循环的触发器中！

＆＃13;

＆＃13;

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';
            };
        },
    });
});

＆＃13;

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

＆＃13;

<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/>

＆＃13;

＆＃13;

＆＃13;