Пересчитать getBoundingClientRect () при изменении размера браузера для фиксированной кнопки? - PullRequest
Новая
       7

Пересчитать getBoundingClientRect () при изменении размера браузера для фиксированной кнопки?

0 голосов
/ 28 января 2020

В двух словах я создаю липкую кнопку, которая показывает, как после позиции прокрутки проходит целевой элемент на странице. Я пытаюсь рассчитать расстояние от верхней части страницы до нижней части целевого элемента. Сценарий, приведенный ниже, похоже, работает при загрузке, но если я изменю размер браузера, числа не будут пересчитаны, чтобы получить правильное расстояние. Я знаю, что должен использовать другой приемник событий, такой как «on resize», но я не могу получить правильный лог c с моим текущим кодом. Любая помощь приветствуется!

Текущий код 

$(function(){

    function ctaBundle(){
        //target element
        var cardsContainer = document.querySelector('.card-block');

        // calculate the distance from top to the bottom of target element plus padding offset
        var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;

        //using to only trigger on mobile using mql
        var mq = window.matchMedia('(max-width: 30em)');

        //function with if statement to fade in if you pass target element
        $(window).on('scroll', function() {
            if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
                $(".sticky-cta-double").fadeIn();
            }else{
                $(".sticky-cta-double").hide();
            } 
        });   
    }
    ctaBundle();

});

1 Ответ

0 голосов
/ 28 января 2020

Думаю, я понял это. Удаляя событие прокрутки в функции и добавляя оба прослушивателя событий после функции, она, кажется, работает. 

$(function(){

    function ctaBundle(){
        var cardsContainer = document.querySelector('.card-block');
        var bundleHeader = document.querySelector('.bundle-header');
        var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;
        var mq = window.matchMedia('(max-width: 30em)');

        if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
            $(".sticky-cta-double").fadeIn();
        }else{
            $(".sticky-cta-double").hide();
        } 
    }
    ctaBundle();
    window.addEventListener('resize', ctaBundle, false); 
    window.addEventListener('scroll', ctaBundle, false);

});

Если у кого-то есть лучший ответ / logi c, пожалуйста, дайте мне знать, но это кажется работать как задумано сейчас.

...