RWD的Stellar.js

Question

我一直在與stellar.js搞亂。在我的設計中，爲了節省水平空間，導航需要變爲select。

我想象中的HTML將類似於此：

<select> 
    <option data-slide="1">Accueil</option> 
    <option data-slide="2">Services</option> 
    <option data-slide="3">Réalisations</option> 
    <option data-slide="4">Contact</option> 
</select> 

但是，我不知道至於怎樣.js文件應在爲了做到這一點改變。我相信這是魔術發生的地方，但我不是100％在這：

slide.waypoint(function (d, e) { 
    dataslide = c(this).attr("data-slide"); 
    if (e === "down") { 
     c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").prev().removeClass("active") 
    } else { 
     c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").next().removeClass("active") 
    } 
}); 

有沒有人曾經這樣做過？謝謝 ！

Answer 1

我可以通過你發佈的是你在Tutsplus一展身手以下教程出版了一會，右邊的代碼知道？

那麼，那塊Javascript代碼利用爲選擇了對應於所述滑動在視口中（因此視覺上增強的話）的鏈接來標記航點插件。但是既然你要使用下拉列表，上面的方法是沒用的。爲了完成任務，您需要首先確保用戶在更改選擇框值時正確滾動。這將使招（你最好改變以下jQuery選擇，以確保該處理程序並不影響網頁中的任何其它輸入控制，但主要的下拉菜單導航控件）：

$('select').on('change', function() { 
    var slide = $(this).find(':selected').data('slide'); 
    goToByScroll(dataslide); 
}); 

好了，現在我們需要以確保列表框在用戶執行滾動時更改其默認值。我們將利用您發佈的一些代碼。像這樣將足夠：

slide.waypoint(function (d, e) { 
    var dataslide = c(this).attr("data-slide"); 
    $('select').prop('selectedIndex', parseInt(dataslide)-1); 
}); 

AS一個忠告，上面的代碼假定所有aslides具有從1至n的數字數據滑動值，並且每個列表框索引指的是與匹配滑動頁面中的相同索引加上1，它的排序順序與它所代表的數據流相同。