javascript - 如何有条件地关闭 Foundation 中的 JS 插件?

标签 javascript jquery zurb-foundation

使用 jQuery,我试图有条件地加载 Magellan sticky nav plugin of the Foundation framework取决于屏幕尺寸:

窗口宽度 > 640px ==> 使用指定选项加载 Magellan

窗口宽度 < 640px ==> 关闭 Magellan

似乎触发了调整大小事件,但插件似乎没有 off 选项。

我得到了以下 JS:

$(document).ready(function() {

/* foundation magellan scroller*/

    function checkWidth() {

        var $windowSize = $(window).width();

        if ( $windowSize > 640 ) {

            $(document).foundation({

                "magellan-expedition": {
                  active_class: 'active', // specify the class used for active sections
                  threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
                  destination_threshold: 50, // pixels from the top of destination for it to be considered active
                  throttle_delay: 50, // calSculation throttling to increase framerate
                  fixed_top: 75, // top distance in pixels assigend to the fixed element on scroll
                  offset_by_height: true // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
                }

            });

        } else {

            $(document).foundation('magellan', 'off');

        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

});

最佳答案

您没有 html 标记,但您可以通过删除数据属性来删除或关闭 magellan 粘性

如果你的 html 看起来像这样

在你的 else 声明中删除 att

 else {

          $(".navi-f").removeAttr("data-magellan-expedition");

    }

这样就像关闭插件一样

关于javascript - 如何有条件地关闭 Foundation 中的 JS 插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29783895/

相关文章:

javascript - 使用偏移旋转 Alpha (THREE.JS R76)

javascript - 在另一个对象 JavaScript 中搜索多个对象值

javascript - 基于另一列聚合React中表中一列的值

Javascript 用 $ 替换问题

javascript - IE6 会跳过 javascript 中的错误吗?

Javascript - 迭代数组并调用 Jquery Ajax 请求并等待请求完成,然后再转到下一个请求?

javascript - 打开页面时执行 JavaScript

jquery - IE8 : invisible third-level navigation menu in Foundation 5. 2

css - 在 Foundation 5 中向顶部栏下拉菜单添加缓动过渡

html - 网格布局中的 "holes",Zurb 基金会