JQuery Waypoint功能沒有調整大小後重置

我已經在StackOverflow上廣泛地瀏覽了這個答案，並且找不到解決我的問題的任何東西。JQuery Waypoint功能沒有調整大小後重置

基本上，我有一個在標題中觸發的航點功能。它應該以兩種不同的方式發射，具體取決於窗戶的寬度。在寬度參數（一個小於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(); 
     }, 
    });

來源

2015-07-11 Ashkas

你試過'Waypoint.refreshAll（）;' – Miro

沒有任何的運氣都試過了。已經把它放在resize事件中，也放在函數中。不過，我有一種感覺我錯誤地使用了它。 – Ashkas

我記得有一個粘滯標題類似的問題。我最終切換到[ScrollMagic]（http://scrollmagic.io/），因爲它自動響應。無需刷新 – Miro

這次聚會晚了，但我遇到了一個近期在水平滾動網站上實現Waypoint 4.0.0（無框架）的類似問題。

備案文件指出刷新上稱爲窗口大小調整：

時自動調整大小的窗口，所以只需要手動調用時的佈局變化外發生大小調整的。結合Waypoint.refreshAll(); -

無論出於何種原因，如預期，所以我工作圍繞它通過利用一箇舊的去抖動功能（http://unscriptable.com/2009/03/20/debouncing-javascript-methods/約翰·漢恩）這似乎並沒有發生。

防抖動功能：

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

呼叫防抖與航點：

來源

2016-02-21 21:06:14 simoncorry

JQuery Waypoint功能沒有調整大小後重置

回答

相關問題