Div隨着你在桌面屏幕上滾動，並在移動屏幕上修復

Question

當你在991以上的屏幕上滾動時，我想要一個div滾動。在屏幕尺寸較小時，我想要修復div。我希望在每次有人加載或調整頁面大小時刷新javascript代碼。

在這裏我的代碼（它不幹...）。

我的問題是，當我調整窗口的大小（桌面畫面 - >手機屏幕 - >桌面畫面...）： 1 - 上桌面 - 移動屏幕上的我不能在頁面 2的底部去屏幕我有一個問題，當我滾動頁面

//when the page is load and the window resize detect if it's a smallscreen 
    var smallscreen = true; 
    $(window).on("resize load", function() { 
    if ($(window).width() > 991) { 
     smallscreen = false; 
    } 
    else { 
     smallscreen = true; 
    }; 

    //if it's not a small screen activate the scrolling 
    if (smallscreen == false) { 
     $.fn.followTo = function (pos) { 
     var $this = this, 
      $window = $(window); 

     $window.scroll(function(e){ 
      if ($window.scrollTop() > pos) { 
      $this.css({ 
       position: 'absolute', 
       top: pos 
      }); 
      } 
      else { 
      $this.css({ 
       position: 'fixed', 
       top: 180 
      }); 
      }; 
     }); 
     }; 
     $('#checkout_validation').followTo(400); 
    } 
    else { 
     $.fn.followTo = function (pos) { 
     var $this = this, 
      $window = $(window); 

     $window.on("resize scroll load", function(e){ 
      if ($window.scrollTop() > pos) { 
      $this.css({ 
       position: 'initial', 
       width: '100%', 
       top: 0 
      }); 
      } 
      else { 
      $this.css({ 
       position: 'initial', 
       width: '100%', 
       top: 0 
      }); 
      }; 
     }); 
     }; 
     $('#checkout_validation').followTo(0); 
    }; 
    }); 

Answer 1

這是我工作的代碼。感謝@iMatoria的乾燥。

//when the page is load and the window resize detect if it's a smallscreen 
var smallscreen = true; 

$.fn.followTo = function(pos) { 
    var $this = this, 
     $window = $(window); 

    $window.on("resize scroll", function(e) { 
     function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) { 
      if (smallscreen == false) { 
       //alert('bigcreen scroll end'); 
       $this.css({ 
        position: positionForBiggerScreen, 
        top: topOffsetForBiggerScreen 
       }); 
      } else { 
       //alert('smallscreen no scroll end '); 
       $this.css({ 
        position: 'inherit', 
        top: 0 
       }); 
      } 
     } 

     if ($window.scrollTop() > pos) { 
      positionByScreen("absolute", pos); 
     } else { 
      positionByScreen("fixed", 180); 
     }; 
    }); 
}; 

$(window).on("resize load", function() { 
    smallscreen = !($(window).width() > 991); 

    //if it's not a small screen activate the scrolling 
    $('#checkout_validation').followTo(smallscreen ? 0 : 400); 

    //var d = document.getElementById("checkout_validation"); 
    //d.className += " otherclass"; 
});