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);
});

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

RWD中的Stellar.js

1 个答案: