滾動上的垂直滑塊

Question

我在尋找一個應該在滾動上垂直改變滑塊的滑塊。

這是refrence網址：https://www.uber.com/的移動滑塊

請幫助我，我試圖做到這一點since7,8小時。 這是我正在嘗試使用的代碼。

$(document).ready(function() { 

// var totalheight=$(window).height(); 
// $('.carosel-section').css('height',totalheight); 

//Set each section's height equals to the window height 
//$('.moveable').height($(window).height()); 

$('.moveable').first().addClass('active'); 

$('.carousel-wrap').on('mousewheel DOMMouseScroll', function (e) { 
    e.preventDefault();//prevent the default mousewheel scrolling 
    var active = $('.moveable.active'); 
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1; 

    if (delta < 0) { 
     //mousewheel down handler 
     next = active.next(); 
     if (next.length) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: next.offset().top 
       }, 'fast'); 

       // move the indicator 'active' class 
       next.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 100); 
     } 

    } else { 
     prev = active.prev(); 

     if (prev.length) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: prev.offset().top 
       }, 'slow'); 

       prev.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 800); 
     } 

    } 
}); 

}); 

Answer 1

您是否試過在Parallax.js？我認爲這就是你要找的。主頁上的示例應該爲您提供快速入門！