调整大小后 JQuery Waypoint 功能未重置答案

【问题标题】：JQuery Waypoint function not reseting after resize调整大小后 JQuery Waypoint 功能未重置
【发布时间】：2015-07-11 03:17:16
【问题描述】：

我在 StackOverflow 上广泛寻找答案，但找不到任何可以解决我的问题的方法。

基本上，我有一个在标题中触发的航路点功能。它应该以两种不同的方式触发，具体取决于窗口宽度。在宽度参数（一个小于 750 像素，另一个大于 750 像素）内加载脚本会产生预期的行为。

但是，如果用户调整屏幕大小，例如从 800 像素变为 400 像素，则从 800 像素开始的函数仍会运行。尽管该函数被绑定到一个调整大小事件。

我感觉我需要在调整大小时完全刷新该功能，但我不确定如何实现。

下面是我的代码。我试过在同一个函数中运行 mobileView 和 tabletView，但总是得到相同的结果。

var _w = Math.max( $(window).width(), $(window).height() );
    var mobileView = (_w <= 750);
    var largeView = (_w >= 751);    

    var header_cta = $(".header_cta");
    var midbar = $(".midbar");
    var header_container = $(".header");

    var top_spacing = 0;
    var waypoint_offset = 1;

    //var scrollbar = (window.innerWidth-$(window).width());

    var header_waypoint_handler = new Waypoint({            

        element: document.getElementById('header_waypoint'),
        handler: function(direction) {                                  

            function large_header_waypoint() {
                if (largeView) {
                    if (direction === 'down') {
                        header_container.css({ 'height':midbar.outerHeight() });        
                        midbar.stop().addClass("stick").css("top",-midbar.outerHeight()).animate({"top":top_spacing});
                    }
                    if (direction === 'up') {
                        header_container.css({ 'height':'auto' });
                        midbar.removeClass("stick").css("top",midbar.outerHeight()+waypoint_offset).animate({"top":""});

                    }

                }
            }

            function mobile_header_waypoint() {
                if (mobileView) {

                    if (direction === 'down') {
                      $('div.header_hamburger_menu').addClass('stick');
                      header_container.css({ 'height':header_cta.outerHeight() });      
                      header_cta.stop().addClass("stick").css("top",-header_cta.outerHeight()).animate({"top":top_spacing});
                    }
                    if (direction === 'up') {
                      $('div.header_hamburger_menu').removeClass('stick');
                      header_container.css({ 'height':'auto' });
                      header_cta.removeClass("stick").css("top",header_cta.outerHeight()+waypoint_offset).animate({"top":""});
                    }
                }
            }

            $(window).resize(function() {
                large_header_waypoint();
                mobile_header_waypoint();
            }).resize();
        },
    });

【问题讨论】：

你试过Waypoint.refreshAll();
已经尝试过，但没有任何运气。已将其与 resize 事件一起放置，并且也在函数中。但是，我感觉我一直在错误地使用它。
我记得有类似的问题与粘性标题。我最终切换到ScrollMagic，因为它是自动响应的。无需刷新

标签： jquery resize jquery-waypoints

【解决方案1】：

在这里聚会迟到了，但我最近在水平滚动网站上实施 Waypoints 4.0.0（无框架）时遇到了类似的问题。

作为记录，文档声明在调整窗口大小时会调用刷新：

在调整窗口大小时自动调用，因此仅当布局更改发生在调整大小之外时才需要手动调用。

无论出于何种原因，这似乎没有像预期的那样发生，所以我通过结合使用旧的去抖动功能 (John Hann - http://unscriptable.com/2009/03/20/debouncing-javascript-methods/) 和 Waypoint.refreshAll(); 来解决它。

去抖功能：

// debouncing function from John Hann
(function($,sr){
    var debounce = function (func, threshold, execAsap) {
        var timeout;
        return function debounced () {
            var obj = this, args = arguments;
            function delayed () {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };
            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);
            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function(fn){
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
})(jQuery,'smartresize');

使用 Waypoint 调用去抖：

// Refresh Waypoints after browser resize:
$(window).smartresize(function(){
    Waypoint.refreshAll();
});

【讨论】：