如何在以 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}