Responsive design RWD中的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>

---

有人这样做过吗？谢谢

我可以从你发布的代码中看出，你是在遵循一段时间前发布的教程，对吗

好的，这段Javascript代码利用waypoint插件将与视口中的幻灯片相对应的链接标记为选中（从而在视觉上增强它）。但是，由于您将使用下拉列表，上述方法是无用的。要完成任务，首先需要确保用户在更改selectbox值时正确滚动。这将使技巧（您最好更改下面的jQuery选择器，以确保此处理程序不会影响页面中的任何其他输入控件，但不会影响主下拉导航小部件）：

好的，现在我们需要确保listbox在用户执行滚动时更改其默认值。我们将利用您发布的一些代码。这样就足够了：

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

---

作为警告，上面的代码假设所有的幻灯片都有一个从1到n的数字数据幻灯片值，每个列表框索引引用一个匹配的幻灯片，该幻灯片在页面中具有相同的索引，加上1，其排序顺序与它所表示的数据幻灯片相同。

是的，这正是我得到原始代码的地方。我试过你发布的代码；但是，滚动效果似乎只有在我单击

选择

之外的其他位置时才会起作用，并且不会指向正确的幻灯片，您可以在这个JSFIDLE中找到：

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