当以 1600 分辨率滚动时到达页脚部分时如何停止固定部分

Question

我已经开发了 opencart 网站，它工作正常，但问题是他们在产品列表页面中的过滤器位置修复了它在 1980 年和 1680 分辨率中的工作正常，但单词过滤器的 1600 分辨率与下面附上的页脚部分屏幕截图重叠@ 987654321@ 我也尝试了在这个门户中发布的解决方案 请任何人帮助我 enter image description here

$(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}