https://elmondelatele.cat/web/assets/js/sticky-add-articulos.js

1(function () {
2  //console.error('StickyRoba + AlturaExtendida v1.2');
3
4  let handleScroll;
5  let adsInitialized = false;
6
7  function getHeaderOffset() {
8    const header = $('.wrap-HEADER');
9    const nav = $('.wrap-NAV');
10
11    let offset = 0;
12    if (header.length && header.css('position') === 'fixed') {
13      offset += header.outerHeight();
14    }
15    if (nav.length && nav.css('position') === 'fixed') {
16      offset += nav.outerHeight();
17    }
18
19    return offset;
20  }
21
22  function ajustarAlturaUltimoRoba() {
23    const contenidoIzq = $('.CONTENIDO-ARTICULO');
24    const columnaDer = $('.COLUMNA-DER');
25    if (contenidoIzq.length === 0 || columnaDer.length === 0) return;
26
27    const robas = columnaDer.children('div[id^="roba_desktop_"]');
28    if (robas.length === 0) return;
29
30    const ultimoRoba = robas.last();
31    const bottomIzq = contenidoIzq.offset().top + contenidoIzq.outerHeight() - 24;
32    const bottomRoba = ultimoRoba.offset().top + ultimoRoba.outerHeight();
33
34    const espacioExtra = bottomIzq - bottomRoba;
35
36    if (espacioExtra > 0) {
37      const nuevaAltura = ultimoRoba.outerHeight() + espacioExtra;
38
39      // 🟢 Aplicamos estilos al último roba
40      ultimoRoba.css({
41        'max-height': `${nuevaAltura}px`,
42        'height': `${nuevaAltura}px`,
43      });
44
45      // 🟢 También a sus primeros 2 hijos (si existen)
46      const hijos = ultimoRoba.children('div');
47      hijos.eq(0).css('height', '100%');
48      hijos.eq(1).css('height', '100%');
49    }
50  }
51
52  function iniciarStickyRobas() {
53    if ($(window).width() <= 991) return;
54    if (adsInitialized) return;
55    adsInitialized = true;
56
57    const columnaDer = $('.COLUMNA-DER');
58    if (columnaDer.length === 0) return;
59
60    const robas = columnaDer.children('div[id^="roba_desktop_"]');
61    if (robas.length === 0) return;
62
63    handleScroll = function () {
64      const headerOffset = getHeaderOffset();
65
66      robas.each(function () {
67        const roba = $(this);
68        const adWrapper = roba.find('div[id^="div-gpt-ad"]').first();
69        const iframeTarget = adWrapper.find('div[id^="google_ads_iframe_"], iframe').first();
70
71        if (adWrapper.length === 0 || iframeTarget.length === 0) return;
72
73        const robaRect = roba[0].getBoundingClientRect();
74        const wrapperHeight = adWrapper.outerHeight();
75        const iframeHeight = iframeTarget.outerHeight();
76        const topDistance = robaRect.top;
77        const bottomDistance = robaRect.bottom;
78
79        const containerHeight = roba[0].scrollHeight;
80        const espacioScroll = containerHeight - iframeHeight;
81        const diferenciaAltura = Math.abs(wrapperHeight - iframeHeight);
82
83        // Limpiar estilos antes de aplicar
84        iframeTarget.removeClass('fixed_add stick-bottom').css({
85          position: 'static',
86          top: 'auto',
87          bottom: 'auto',
88          'max-width': 'none',
89          width: 'auto',
90        });
91
92        // No aplicar sticky si contenido casi igual que wrapper o no hay espacio suficiente
93        if (espacioScroll < 80 && diferenciaAltura < 40) return;
94
95        if (topDistance <= headerOffset && (bottomDistance - headerOffset) > iframeHeight) {
96          iframeTarget.addClass('fixed_add').css({
97            position: 'fixed',
98            top: `${headerOffset}px`,
99            'max-width': '300px',
100            width: '100%',
101            'box-sizing': 'border-box',
102            'z-index': 9999,
103            'display':'initial'
104          });
105        } else if ((bottomDistance - headerOffset) <= iframeHeight) {
106          iframeTarget.addClass('stick-bottom').css({
107            position: 'absolute',
108            bottom: '0',
109            'max-width': '300px',
110            width: '100%',
111            'box-sizing': 'border-box',
112          });
113        }
114      });
115
116      ajustarAlturaUltimoRoba();
117    };
118
119    // Esperar que los anuncios estén visibles
120    let attempts = 0;
121    const maxAttempts = 10;
122    const intervalTime = 150;
123
124    const interval = setInterval(() => {
125      const ready = robas.toArray().every(roba =>
126        $(roba).children(':not(script)').first().outerHeight() > 0
127      );
128
129      if (ready || attempts >= maxAttempts) {
130        clearInterval(interval);
131        handleScroll();
132        $(window).on('scroll resize', handleScroll);
133      }
134      attempts++;
135    }, intervalTime);
136
137    // Fallback por si nunca carga
138    setTimeout(() => {
139      clearInterval(interval);
140      handleScroll();
141      $(window).on('scroll resize', handleScroll);
142    }, maxAttempts * intervalTime);
143  }
144
145  $(document).ready(function () {
146    iniciarStickyRobas();
147  });
148})();