Не дергается функция на resize окна

228

05 декабря 2017, 20:12

Есть проблема. Когда размер экрана меньше 1023px, то фильтры скрываются и увидеть их можно щелкнув по кнопке "Filters". Соответственно колонка фильтров имеет отличные от мобильной или десктопной версии стили. Когда размер экрана меньше 768ркс, то колонка фильтров имеет другие стили. Моя проблема связана с ресайзом окна. Когда я загружаю страницу на 769-1023px и щелкаю по кнопке фильтра, а затем изменяю размер окна до 761px, то на колонке фильтра появляется скролл всей страницы, хотя если мы загрузим страницу на 761пкс и щелкнем по кнопке филтра, то такого эффекта не будет. Все будет работать хорошо. Почему моя функция не пересчитывает высоту на ресайз? Что можно сделать? Заранее спасибо!

Вот видео бага

//body height calculation 
var calcHeightFilter = function calcHeightFilter() { 
    var bodyHeight = $(document).outerHeight(true); 
    var asideHeight = $('.section--aside').height(); 
 
    if (($(document).width()) < 768) { 
        if ($('.section--aside').hasClass('open-aside')) { 
            $('.js-anchor-top').css("display", "none"); 
            if (bodyHeight > asideHeight) { 
                $('body').css("overflow", "hidden"); 
                $('body').height(asideHeight + 169); 
            } 
        } 
 
         
    } 
 
    if (($(document).width()) >= 768 && ($(document).width()) <= 1023 ) { 
        tabletFilterHeight = $('.wrap-main').height(); 
        $(".section--aside").height(tabletFilterHeight); 
        $(".section--aside").css("overflow", "scroll"); 
    } 
} 
 
 
 
// Open/close filter in catalog 
$(document).on('click', '.js-filter_show', function(){ 
    $(".section--aside").toggleClass("open-aside"); 
    $(".section--catalog").toggleClass("overlay-section"); 
     
    if (($(document).width()) >= 768 && ($(document).width()) <= 1023 ) { 
        $(".footer").css("margin-bottom", "60px"); 
    } 
 
    calcHeightFilter(); 
}); 
 
$(document).on('click', '.section--aside__close', function(){ 
    $(".section--aside").toggleClass("open-aside"); 
    $(".section--catalog").toggleClass("overlay-section"); 
    $(".footer").css("margin-bottom", "0"); 
 
 
    $('body').css("overflow", "scroll"); 
    $('body').css("height", "100%"); 
}); 
 
// body height recalculation on window resizing. Don't work on resize 
$(window).on('resize', function(){ 
      var win = $(this); 
    calcHeightFilter(); 
});

<html prefix="og: http://ogp.me/ns#" class=" flexbox flexwrap" style="overflow-y: scroll;" lang="ru-RU"><!--<![endif]--><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
    <link href="https://samlpetask.000webhostapp.com/task/internal.css" rel="stylesheet"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
</head> 
 
<body class="no-touch"> 
 
<div class="wrap-main"> 
    <section class="section section--content"> 
        <section class="section section-catalog"> 
            <div class="container"> 
                <div class="container__inside"> 
                    <div class="js-aside section section--aside"> 
                        <div class="section--aside__close"></div> 
                        <div class="js-filter-panel filter filter--panel"> 
                            <div class="filter__header"> 
                                <span>Your choose</span> 
                                <span class="js-filter-reset link link--underline-dotted">Cleaner all</span> 
                            </div> 
                            <div class="js-filter-items filter__items"></div> 
                        </div> 
 
                        <div class="tree"> 
                            <div class="tree__header"><a href="#">Category</a></div> 
                            <div class="tree__drop is-active"> 
                                <div class="tree__link"> 
                                    <a href="#"> 
                                        <span>Lorem Main</span> 
                                        <svg class="icon icon--chevron-d"><use xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-d"></use></svg> 
                                    </a> 
                                </div> 
                                <div class="tree__drop is-active"> 
                                    <div class="tree__link"> 
                                        <a href="#"> 
                                            <span>Lorem 1</span> 
                                            <svg class="icon icon--chevron-d"><use xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-d"></use></svg> 
                                        </a> 
                                    </div> 
                                    <div class="tree__drop is-active"> 
                                        <div class="tree__link is-active"> 
                                            <a href="#"> 
                                                <span>Lorem 1.1</span> 
                                            </a> 
                                        </div> 
                                        <div class="tree__link"> 
                                            <a href="#"> 
                                                <span>Lorem 1.2</span> 
                                            </a> 
                                        </div> 
                                        <div class="tree__link"> 
                                            <a href="#"> 
                                                <span>Lorem 1.3</span> 
                                            </a> 
                                        </div> 
                                        <div class="tree__link"> 
                                            <a href="#"> 
                                                <span>Lorem 1.4</span> 
                                            </a> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <form action="" method="" class="js-filter form form--filter filter"> 
                            <div class="accordion"> 
                                <div class="js-accordion accordion__group" data-accordion="container" data-group="filter" data-target="target1"> 
                                    <div class="js-accordion accordion__header accordion__header_sm" data-accordion="toggler" data-group="filter" data-target="target1"> 
                                        <span>Age</span> 
                                    </div> 
                                    <div class="accordion__content accordion__content_sm"> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter1" name="accordion__checkbox1" id="accordion__checkbox1" value="1" type="checkbox"> 
                                            <label for="accordion__checkbox1"> 
                                                <span>Age 1</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter2" name="accordion__checkbox2" id="accordion__checkbox2" value="2" type="checkbox"> 
                                            <label for="accordion__checkbox2"> 
                                                <span>Age 2</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter3" name="accordion__checkbox3" id="accordion__checkbox3" value="3" type="checkbox"> 
                                            <label for="accordion__checkbox3"> 
                                                <span>Age 3</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter4" name="accordion__checkbox4" id="accordion__checkbox4" value="4" type="checkbox"> 
                                            <label for="accordion__checkbox4"> 
                                                <span>Age 4</span> 
                                            </label> 
                                        </div> 
                                    </div> 
                                </div> 
                                <div class="js-accordion accordion__group" data-accordion="container" data-group="filter" data-target="target2"> 
                                    <div class="js-accordion accordion__header accordion__header_sm" data-accordion="toggler" data-group="filter" data-target="target2"> 
                                        <span>Age</span> 
                                    </div> 
                                    <div class="accordion__content accordion__content_sm"> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter5" name="accordion__checkbox5" id="accordion__checkbox5" value="1" type="checkbox"> 
                                            <label for="accordion__checkbox5"> 
                                                <span>Age 1</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter6" name="accordion__checkbox6" id="accordion__checkbox6" value="2" type="checkbox"> 
                                            <label for="accordion__checkbox6"> 
                                                <span>Age 2</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter7" name="accordion__checkbox7" id="accordion__checkbox7" value="3" type="checkbox"> 
                                            <label for="accordion__checkbox7"> 
                                                <span>Age 3</span> 
                                            </label> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter8" name="accordion__checkbox8" id="accordion__checkbox8" value="4" type="checkbox"> 
                                            <label for="accordion__checkbox8"> 
                                                <span>Age 4</span> 
                                            </label> 
                                        </div> 
                                    </div> 
                                </div> 
                                <div class="js-accordion accordion__group" data-accordion="container" data-group="filter" data-target="target3"> 
                                    <div class="js-accordion accordion__header accordion__header_sm" data-accordion="toggler" data-group="filter" data-target="target3"> 
                                        <span>Price</span> 
                                        <svg class="icon icon--chevron-d"><use xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-d"></use></svg> 
                                    </div> 
                                    <div class="accordion__content accordion__content_sm"> 
                                        <div class="js-range range"> 
                                            <div class="range__line range__line-filter_small ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" data-min="10" data-max="100" data-step="1" data-values="20, 55"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 11.1111%; width: 38.8889%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 11.1111%;"></span><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 50%;"></span></div> 
                                            <div class="js-range-value range__value"> 
                                                <div> 
                                                    <div><input data-range="from" value="20" maxlength="3" type="text"></div> 
                                                    <div><span>—</span></div> 
                                                    <div><input data-range="to" value="55" maxlength="3" type="text"></div> 
                                                </div> 
                                                <div> 
                                                    <div> 
                                                        <div data-range="from"> 
                                                            <span> 
                                                                <span>20</span> 
                                                            </span> 
                                                        </div> 
                                                    </div> 
                                                    <div></div> 
                                                    <div> 
                                                        <div data-range="to"> 
                                                            <span> 
                                                                <span>55</span> 
                                                            </span> 
                                                        </div> 
                                                    </div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                        <div class="accordion__item"> 
                                            <input filter-name="filter9" name="accordion__checkbox9" id="accordion__checkbox9" value="4" type="checkbox"> 
                                            <label for="accordion__checkbox9"> 
                                                <span>Sale</span> 
                                                <svg class="icon icon--checkbox"><use xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-checkbox"></use></svg> 
                                            </label> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </form> 
                        <!--/filter--> 
                        <div class="button_more" style=""> 
                            <button class="btn js-filter-apply">Show more</button> 
                        </div> 
                    </div> 
                    <!--/section--aside--> 
                    <!--section--main--> 
                    <section class="section section--main"> 
                        <section class="section__title"> 
                            <h1 class="section__title_catalog">My title</h1> 
                        </section> 
                        <section class="section__info">                             
                            <button type="button" class="js-filter_show">Filters <span class="filter__count">(0)</span> </button> 
                        </section> 
                        <!--section--catalog--> 
                        <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam maiores quo accusantium. Accusantium officia impedit dicta, aspernatur voluptatum facere molestias ut mollitia laudantium vero dolorum tempora aliquam dolor dolorem ex nihil voluptas, sequi ratione ullam, quidem et rerum veritatis necessitatibus fugit rem. Dolorum et, impedit rem adipisci possimus totam! Repellendus iusto, eveniet, saepe nulla dolorem distinctio quo vero molestiae. Vel laborum, rerum nulla delectus at incidunt expedita nobis deleniti commodi id placeat ducimus consequatur reiciendis. Sapiente non odit porro reiciendis, alias repellendus. Officia officiis dolor accusantium recusandae repellendus ullam nihil expedita fugiat animi velit quaerat inventore laboriosam, id, cupiditate molestiae, deserunt aperiam maxime, impedit rem magni. Nemo iure blanditiis ut inventore voluptatibus voluptas incidunt culpa ratione maxime tempora obcaecati possimus esse reiciendis consectetur doloribus eum officia, explicabo voluptatum dolorum vero odit quaerat dignissimos quas magni! Aspernatur possimus, veniam voluptatem eius ex corrupti quidem vero enim ipsa iure odit deleniti sapiente saepe ab natus culpa cum voluptas! Ipsum nesciunt quod maxime fugit atque laudantium perspiciatis eos deleniti magnam possimus officia, odio inventore explicabo assumenda quia aliquam itaque quaerat perferendis repellat fugiat! Ipsa quos voluptatibus odio, excepturi tenetur officia maxime alias officiis cum esse debitis quia obcaecati voluptatum, autem molestiae mollitia ab repellendus? Eligendi similique rem saepe ipsam necessitatibus pariatur explicabo perferendis at dolorum corporis, cumque odit animi architecto eveniet aspernatur perspiciatis, itaque maxime assumenda a eos voluptates quisquam ducimus sapiente harum? Labore nesciunt quidem explicabo, sint recusandae rerum harum? Libero, temporibus aliquid vero quasi. Nam pariatur iusto recusandae dolorum dignissimos blanditiis praesentium fugiat tempora provident quam laborum magnam quos ratione, quaerat accusantium accusamus, optio porro. Eveniet aliquid consectetur soluta ab suscipit earum, expedita vero, corporis et libero magni in, nulla reprehenderit facere. Asperiores consequuntur ipsum voluptatibus, iusto est distinctio velit fugiat, repellendus id ea adipisci. Assumenda delectus nam maiores cupiditate. Quia reiciendis, vel odio praesentium autem aliquid repellat eveniet, minus delectus quaerat accusantium? Veniam quod possimus, sit corporis quasi debitis ratione distinctio vero quaerat, tempora quos eligendi libero aliquid similique. Quisquam error rem fugiat omnis, minima quibusdam sequi saepe possimus obcaecati sit at, debitis quidem sint quod aliquid nobis eos quos ad vitae dolorem neque, cumque repellat itaque totam. Pariatur tenetur blanditiis optio doloremque deserunt, quos cum voluptate architecto sunt fuga voluptatum nemo accusamus aut non numquam odit eum laborum assumenda consequuntur a maxime! Laboriosam repellat tempora iusto molestias quas adipisci ex dicta. Labore repellendus, assumenda ab unde, ex, magni non saepe hic alias veritatis est eos laboriosam deleniti dolorum. Repellendus, in unde laudantium dolor nam laboriosam perferendis consequatur odio voluptas. Tempore perferendis in earum eveniet, minima, pariatur esse aut dicta. Consequatur id debitis aspernatur ipsum perspiciatis, omnis officiis iusto expedita illo voluptatem dignissimos, veniam beatae, laudantium rem labore officia et! Odit, deleniti voluptatem architecto? Quaerat corrupti deserunt amet magnam, quam, libero asperiores inventore distinctio? Nemo quibusdam esse enim quam officia sit totam mollitia qui sunt consequuntur excepturi dignissimos quos possimus corrupti ab aspernatur labore quidem fugit ratione sequi aliquam assumenda maxime, exercitationem. Illo nisi nam inventore ipsum praesentium, fuga dignissimos unde perferendis sit. Quod deserunt possimus, maxime eaque similique architecto, vero natus, unde odio saepe asperiores, eius obcaecati reprehenderit dolorem. Est hic debitis temporibus ratione at, ipsa neque. Fugiat autem asperiores, nesciunt praesentium maxime! Commodi eveniet vitae dolor sapiente, ipsam accusantium voluptates reprehenderit tempora ipsa perspiciatis est sunt eum placeat corporis inventore aliquam nam delectus voluptate veritatis reiciendis nihil. Possimus molestiae repellendus corporis reiciendis aliquam necessitatibus optio illo neque ratione ipsa ullam omnis accusantium saepe similique id ea in vitae aspernatur, autem hic quas, dolorem explicabo! Corporis, ipsum? Possimus eos quibusdam qui quidem dicta, nobis accusantium, atque veritatis excepturi! Reiciendis quaerat unde facere mollitia error sed, voluptate aspernatur sapiente iure qui ipsum velit recusandae earum libero necessitatibus nulla, in beatae excepturi delectus dolore sit minima! Architecto sit, neque praesentium, voluptatibus maxime fuga laudantium, obcaecati unde consequatur, necessitatibus aspernatur earum pariatur. Beatae itaque odit autem minima veritatis labore ipsum porro facilis aliquam aliquid fugit totam maxime eligendi ipsa harum, consequuntur minus sequi delectus eius quibusdam distinctio dolores! Magnam atque modi suscipit consequatur numquam cum ratione obcaecati. Quas illum architecto hic nesciunt? Molestias distinctio asperiores, nemo aliquid incidunt molestiae harum, maxime mollitia numquam eligendi quisquam doloremque adipisci facilis, eius iste consequuntur recusandae repudiandae, officiis corporis. Fugiat sed optio aut culpa? Quidem vel voluptatem et unde nemo, ad tempore ullam perferendis inventore, dolore nostrum at consectetur dolorem, debitis, facilis hic cupiditate. Omnis eos dolor in tenetur deserunt perferendis rerum neque totam, non, inventore soluta excepturi voluptatum, dolores maiores. Voluptas maiores autem suscipit quibusdam fuga voluptate, illum itaque quas consequatur eum sapiente quam saepe perspiciatis exercitationem facilis ullam ut, nam commodi quia maxime alias assumenda eveniet ab inventore ipsa! Vero fuga esse architecto nisi sunt eligendi asperiores reprehenderit ipsam ad, nulla saepe optio deleniti rerum voluptatum provident soluta labore deserunt quae et aliquid quibusdam illo quas aspernatur exercitationem. Hic sapiente repudiandae, perspiciatis nam reprehenderit aspernatur est cumque soluta voluptatibus numquam harum tempora rem dolores, blanditiis doloremque. Enim animi ipsa iusto beatae totam, eum in, quidem nesciunt sed fugit dolores perferendis odio quam tempore officia sit perspiciatis? Eligendi quidem iste, quasi, facere quod doloremque? Exercitationem, eaque. Consequuntur cupiditate, incidunt dolores quo reprehenderit provident sapiente dolorum ad repellat cumque tempore voluptate dolorem veniam, velit! Eum doloremque velit maiores, dolorum impedit vel quaerat autem unde at, assumenda explicabo iure, consequatur asperiores, voluptates! Nostrum praesentium ullam, provident alias aliquid aliquam recusandae animi dicta aspernatur quia asperiores quibusdam aperiam est magni consectetur sapiente tenetur totam ea. Maxime, inventore, cum. Natus praesentium animi id adipisci reprehenderit tempora neque ab provident expedita ratione tenetur, esse eos eius voluptas, magnam voluptate quaerat nemo pariatur commodi! Ab, laboriosam dicta reprehenderit! Delectus exercitationem amet cum earum. Laborum ad dolorem corrupti, tenetur vitae delectus harum praesentium quae natus ea rem consequuntur distinctio placeat, voluptates! Adipisci labore, dicta assumenda ipsum consequatur, quidem sed possimus modi odit mollitia, dignissimos aspernatur illo recusandae perferendis quia laudantium suscipit expedita, voluptatum atque! Consequuntur nisi autem atque maxime libero soluta laudantium voluptatem quod! Officia modi, magni, maiores veniam deleniti illum iure nihil, fugiat non vero atque voluptas saepe quidem et laudantium nemo repudiandae nulla praesentium sequi enim, natus. Ducimus minus, facere, sunt alias repudiandae voluptatem aliquid ratione velit iure dolorem sequi doloribus ipsum unde natus eaque eveniet dolores nihil voluptatibus! Porro dolorum repudiandae ex quasi a doloremque minus, animi molestias tempore ratione ipsa reiciendis harum iure eius cumque voluptatibus quibusdam voluptas recusandae, quaerat consequuntur voluptate, soluta sint inventore accusamus. Nam eaque quo ratione accusamus mollitia, odio consequatur a perspiciatis dolorem quasi! Fuga doloremque magni voluptate eveniet velit nemo voluptatibus, pariatur harum. Ratione atque velit debitis inventore, nisi harum unde, maiores, ullam esse architecto aliquam veniam laudantium quidem facere soluta voluptatibus omnis. Minus voluptatum nam esse quas consequatur, eveniet cupiditate odio sunt expedita voluptates quos? Esse quidem, non a, eligendi eveniet dicta, perspiciatis delectus tenetur explicabo ad earum id consectetur sunt ex eum repellat placeat. Mollitia cumque ad culpa vero voluptas sunt eum eius asperiores quaerat. Ipsa ad molestiae voluptas iure nesciunt ex unde consequatur beatae iste, laborum, corporis rem provident dolorum consequuntur. Voluptatum repellat culpa veniam obcaecati fugit! Doloremque consequuntur, soluta facere tempora quae, quisquam vitae unde voluptatem eaque voluptas ut dignissimos quia mollitia at numquam ratione fugiat possimus alias, sequi!</section> 
                         
                    </section> 
                     
                </div> 
            </div> 
        </section> 
    </section> 
    <footer>123</footer> 
 
</div> 
 
</body></html>

Answer 1

функция работает и строчка $('body').height(asideHeight + 169); постоянно при уменьшении окна до 767 пикселей увеличивает высоту меню на 169 пикселей. правда при обратном увеличении окна не вычитается.

попробуйте убрать стили у body в проблемный момент