Элемент Javascript, видимый в области просмотра БЕЗ полей

Я использую следующий код JavaScript, чтобы определить, отображается ли элемент в текущем окне просмотра или нет. Однако при этом не учитываются поля и отступы. Может ли кто-нибудь помочь мне изменить это, чтобы вернуть истину, если «реальный» элемент виден, поэтому поля и отступы игнорируются?

Актуальный JS:

(function ($) {
        $.fn.visible = function (partial) {

            var $t = $(this),
                $w = $(window),
                viewTop = $w.scrollTop(),
                viewBottom = viewTop + $w.height(),
                _top = $t.offset().top,
                _bottom = _top + $t.height(),
                compareTop = partial === true ? _bottom : _top,
                compareBottom = partial === true ? _top : _bottom;

            return compareBottom <= viewBottom && compareTop >= viewTop;
        };
    })(jQuery);

    var win = $(window);

    var allModifications = $(".animation-listener");

    //make all elements visible that are directly visible
    allModifications.each(function (i, el) {
        console.info("loaded js");
        var el = $(el);
        if (el.visible(true)) {
            el.find(".half-width-text").addClass("open");
        }
    });

    //make elements visible that get scrolled into the viewport
    win.scroll(function (event) {
        var current = 1;
        allModifications.each(function (i, el) {
            var el = $(el);
            if (el.visible(true)) {
                el.addClass("animate");
            }
        });
    });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо использования height() используйте outerHeight(true). Этот метод возвращает текущую вычисленную внешнюю высоту (включая отступы, границу и, необязательно, поля) для первого элемента в наборе согласованных элементов или устанавливает внешнюю высоту каждого согласованного элемента.

http://api.jquery.com/outerheight/

спасибо за ответ, работает нормально, но я только что обнаружил getBoundingClientRect (), который работает немного лучше для моего варианта использования :)

ItFreak 29.09.2018 10:14
getBoundingClientRect - это то, что ванильный JS делает без jQuery. знак равно
Arfeo 29.09.2018 10:16

Другие вопросы по теме