Stellar.js in RWD

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代码利用了路点插件，将对应于视口中幻灯片的链接标记为选中(因此在视觉上增强了它)。但是由于您将使用下拉列表，所以上面的方法是无用的。为了完成任务，首先需要确保用户在更改selectbox值时正确滚动。这将使技巧(您最好更改下面的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);
});

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