Question

我在StackOverflow上广泛浏览了一下这个问题的答案，找不到任何解决我问题的方法。

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

如果用户调整屏幕大小，从800像素到400像素，800像素的功能仍会运行。尽管该函数被绑定到resize事件。

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

以下是我的代码。我尝试在同一个函数中运行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();
        },
    });

Answer 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');

使用航点调用去抖：

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

调整大小后JQuery Waypoint功能不会重置

1 个答案: