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文件才能做到这一点。我相信这就是奇迹发生的地方，但我不是百分之百的相信：

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代码利用waypoint插件将视区中与幻灯片对应的链接标记为选中(从而在视觉上增强它)。但是，由于您将使用下拉列表，因此上面的方法是无用的。要完成任务，您首先需要确保用户在更改选择框值时正确滚动。这样就可以了(您最好更改下面的jQuery选择器，以确保此处理程序不会影响页面中除主要dropdown导航小部件之外的任何其他输入控件)：

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

需要注意的是，上面的代码假设所有aslide都有一个从1到n的数字数据幻灯片值，并且每个列表框索引都引用页面中具有相同索引的匹配幻灯片，加上1，其排序顺序与它表示的数据幻灯片相同。