Question

我想创建一个使用jquery ui滑块的单页导航（除非其他东西可能效果更好），它在移动时导航到同一页面上的div，以及当用户向下滚动页面时自动移动。 / p>

基本上，这将是一个滚动到所选相关年份的时间轴。

Slider会像：

----------------◉---------------------
1984   1985   1986   1987   1988   etc

页面内容为：

<div id="1984">
Content
</div>

<div id="1985">
Content
</div>

<div id="1986">
Content
</div>

<div id="1987">
Content
</div>

<div id="1988">
Content
</div>

任何帮助将不胜感激！我希望以前做过这样的事情，而我却没有找对地方。

Answer 1

我使用了解决类似问题的解决方案 $('div').show和.hide以及scrollTop

你可以修改我的小提琴以满足你的需求，这是我的第一个Stack Overflow答案，希望它有所帮助！

HTML：

<div id="container">
    <div id="status"></div>
    <div id="statusb"></div>
    <div id="statusc"></div>
    <div id="statusd"></div>
</div>

CSS：

#container {
    height: 1500px;
    padding: 100px;
}
#status {
    position:fixed;
    background-color:blue;
    height: 100px;
    padding: 100px;
    color:coral;
}
#statusb {
    position:fixed;
    background-color:red;
    height: 100px;
    padding: 100px;
}
#statusc {
    position:fixed;
    background-color:yellow;
    height: 100px;
    padding: 100px;
}
#statusd {
    position:fixed;
    background-color:orange;
    height: 100px;
    padding: 100px;
}

Juicy Bits：

$(document).scroll(function (e) {

    var squash = $(window).scrollTop();

    if (squash >= 250) {
        $('#status').show();
        $('#statusb').hide();
        $('#statusc').hide();
        $('#statusd').hide();

    }
    if (squash >= 500) {
        $('#status').hide();
        $('#statusb').show();
        $('#statusc').hide();
        $('#statusd').hide();

    }
    if (squash >= 750) {
        $('#status').hide();
        $('#statusb').hide();
        $('#statusc').show();
        $('#statusd').hide();

    }
    if (squash >= 1000) {
        $('#status').hide();
        $('#statusb').hide();
        $('#statusc').hide();
        $('#statusd').show();

    }

});

JS FIDDLE

Answer 2

我把我认为你想要做的事情放在一起。你可以试试这个。它使用jQuery滑块事件将页面滚动到正确的div

min = 1985
max = 1989

$("#slider").slider({
   min: min,
   max: max,
   step: 1,
   slide: function(event, ui){
        $('html, body').animate({
            scrollTop: $("#"+ui.value).offset().top
        }, 2000);
   }
});

$(window).scroll( function() {
});

var interval = setInterval(function() {
    var height = $('body').height();
    var offset = $(window).scrollTop();

    sector = Math.round((1 / (height / offset)) * (max - min));
    $('#slider').slider('value', min + sector);
}, 250);

https://jsfiddle.net/apm39qx1/

Answer 3

它可能类似于上面的代码（自我解释）：

$(function() {
  showYear(1984);
  
  var slider = $('#slider').slider({
    min: 1984,
    max: 1988,
    range: "min",
    value: 1984,
    slide: function(e, item) {
      showYear(item.value);
    }
  });
  
  function showYear(year) {
    $('#years div').hide().parent().find('#' + year).show();
  }
});

#slider {
  width: 80%
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="slider"></div>

<div id="years">
  <div id="1984">
    Content of 1984
  </div>

  <div id="1985">
    Content of 1985
  </div>

  <div id="1986">
    Content of 1986
  </div>

  <div id="1987">
    Content of 1987
  </div>

  <div id="1988">
    Content of 1988
  </div>
</div>

Jquery UI Slider导航到页面上的Divs

3 个答案: