Div suivre que vous faites défiler sur l'écran des ordinateurs de bureau et est fixe sur l'écran mobile

Question

Je veux un div suivre que vous faites défiler lorsque vous êtes sur un écran plus large que 991. Sur une taille d'écran plus petite je veux la div fixe. Et je veux que le code javascript soit actualisé chaque fois que quelqu'un charge ou redimensionne la page.

Voici mon code (ce n'est pas sec ...).

Mon problème est quand je redimensionner la fenêtre (écran de bureau -> écran mobile -> écran de bureau ...): 1 - sur écran mobile je ne peux pas aller en bas de la page 2 - sur le bureau écran j'ai un problème quand je fais défiler la page

//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

Voici mon code de travail. Merci à @ Micatoria de l'avoir séché.

//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"; 
});