https://www.muchodeporte.com/web/assets/js/stycky-add-articulos-lateral.js

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