Как остановить фиксированный раздел, когда он достигает нижнего колонтитула при прокрутке с разрешением 1600 и выше

Question

Я разработал веб-сайт opencart, он работает нормально, но проблема заключается в том, что они находятся на странице со списком продуктов. Я установил положение фильтров, исправил его работу в 1980 году и разрешил 1680, но разрешение 1600 для фильтров слов перекрывается на снимке экрана раздела нижнего колонтитула, прикрепленном ниже введите описание изображения здесь Также я пробую решения, размещенные на этом портале Пожалуйста, кто-нибудь, помогите мне введите описание изображения здесь

$(function() {
    var top = $('#sidebar-sticky').offset().top - parseFloat($('#sidebar-sticky').css('marginTop').replace(/auto/, 0));
    var footTop = $('#main_footer').offset().top - parseFloat($('#main_footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar-sticky').outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('#sidebar-sticky').addClass('fixed').removeAttr('style');
            } else {
                $('#sidebar-sticky').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('#sidebar-sticky').removeClass('fixed');
        }
    });
});

#sidebar-sticky{
  position: absolute;
  width: 185px;
}
#sidebar-sticky.fixed{position: fixed;top:70px}
.filter-sticky-container{
  position: relative;
  box-shadow: none;
  border: none;   
}
#main_footer{clear: both;}

<div class="container-fluid"><!-- tag close in category.twig -->
  <div class="container product-listing"><!-- tag close in category.twig -->
    <div class="row"><!-- tag close in category.twig -->
      <div class="filter_selected_container">
        <ul class="filter_selected_list">
          {% set counter = 1 %}
            {% for filter_selected in filters_selected %}
              {% set counter = counter + 1 %}
                <li class="filter_selected" id="filter_selected{{counter}}"><a>{{filter_selected.name}}</a><i class="glyphicon glyphicon-remove filter-remove" data-filterid = "{{filter_selected.id}}"></i></li> 
            {% endfor %}
        </ul>
   </div>

<div class="height-20"></div>
  <div class="col-md-2 col-sm-12 mt-10 filter-sticky-container">
    <div id="sidebar-sticky">
       <div class="panel panel-default fltLft">
    <!--<div class="panel-heading">{{ heading_title }}</div>-->
          <div class="list-group"> {% for filter_group in filter_groups %} 
           {% if filter_group.group_type == "left"  %}
             <a class="list-group-item">{{ filter_group.name }}</a>
               <div class="list-group-item">
                 <div id="filter-group{{ filter_group.filter_group_id }}">{% for filter in filter_group.filter_left %}
                    <div class="checkbox">
                        <label>{% if filter.filter_id in filter_category %}
                        <input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" checked="checked" />
                        {{ filter.name }}
                        {% else %}
                        <input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" />
                        {{ filter.name }}
                        {% endif %}</label>
                    </div>
                {% endfor %}</div>
            </div>
        {% endif %}
        {% endfor %}
    </div>
     <div class="panel-footer text-center">
        <button type="button" id="button-filter" class="btn btn-primary">{{ button_filter }}</button>
     </div>
    </div>
  </div><!-- filter-sticky -->
</div><!-- col-md-2 -->

Answer 1

Я получил решение для вышеуказанной проблемы я дал высоту для фильтра

#sidebar-stick, .prodListMrgRgt{height:100vh}