Блог

Мне нужно, чтобы div менял положение на фиксированное после прокрутки заголовка вне поля зрения. Но мне также нужно, чтобы div не выходил за нижний колонтитул внизу. Я начал с директивы angular для первой части, но не могу понять, как предотвратить переход div через нижний колонтитул.

Я попытался добавить немного jquery, но он работает не идеально, плюс я хотел чисто угловое решение, если это возможно:

  var a=$(document).scrollTop() window.innerHeight;
 var b=$('#footer').offset().top;

          if($('#cart').offset().top   $('#cart').height()
            >= $('#footer').offset().top - 20){
            $( "#cart" ).removeClass( "top-position-cart" )
            $('#cart').css('bottom', (10 (a-b)) 'px');
          }else{
              $( "#cart" ).addClass( "fixed-cart" );
            }
  

         var directive = {
            restrict: 'A',
            scope: {
                offset: '@',
                scrollClass: '@'
            },
            link: function (scope, element) {
                angular.element($window).bind('scroll', function () {
                    if (this.pageYOffset >= parseInt(scope.offset)) {
                        element.addClass(scope.scrollClass);
                  } else {
                        element.removeClass(scope.scrollClass);
                  }
                });
            }
        };
  

   <div id="cart" change-class-on-scroll offset="380" 
       scroll-class="fixed-cart top-position-cart>

  </div>

  

 .fixed-cart {
    position: fixed;
}
.top-position-cart {
  top: 15px;
}