Buongiorno a tutti,
ho la necessità di tenere fissa l'immagine mentre la pagina scrolla, ho provato con uno script ma non è efficace al 100%, più che altro perchè non riesco a rilevare la proprietà height dell'elemento con classe ".product.media", vi allego lo script che stavo testando:
$(document).ready(function ()
{
if ($('body').hasClass('catalog-product-view')) {
let mediaTop = $('.product.media').offset().top;
let mediaHeight = $('.product.media').height() - 52;
let mediaWidth = $('.product.media').width();
let mediaBottom = mediaTop + mediaHeight;
const scrollContent = document.querySelector('body');
scrollContent.addEventListener('scroll', () => {
const scrolled = scrollContent.scrollTop;
var width = $(window).width();
if (width > 1280) {
if (scrolled >= 200) {
let infoBottom = $('.product-info-main').offset().top + $('.product-info-main').height() + $('.main-product-detail').offset().top + $('.main-product-detail').height();
console.log("infoBottom " + infoBottom);
console.log("mediaTop " + mediaTop);
console.log("mediaWidth " + mediaWidth);
console.log("mediaHeight " + mediaHeight);
console.log("mediaBottom " + mediaBottom);
console.log("scrolled " + scrolled);
if (mediaBottom <= infoBottom) {
let scrollTop = $(window).scrollTop();
let mediaTopAdjust = Math.max((scrollTop - mediaTop), 0);
let newMediaBottom = mediaTop + mediaTopAdjust + mediaHeight;
let bottomHeightDiff = (scrolled - mediaHeight) - 700; //infoBottom - mediaBottom;
console.log("newMediaBottom " + newMediaBottom);
if (newMediaBottom + 500 <= infoBottom) {
console.log("top 20");
$('.product.media').css('top','70px');
$('.product.media').css('position', 'fixed');
$('.product.media').css('width', "597px");
$('.sharing').css('top','12px');
} else {
console.log("top diff " + bottomHeightDiff);
$('.product.media').css('top', bottomHeightDiff + 'px');
$('.product.media').css('position', 'absolute');
$('.product.media').css('width', "597px");
$('.sharing').css('top','12px');
}
}
} else {
console.log("relative");
$('.product.media').css('top','0');
$('.product.media').css('position', 'relative');
$('.product.media').css('margin-top', "");
$('.product.media').css('width', "597px");
$('.sharing').css('top','12px');
$('.sharing').css('right','48px');
}
}
}, {passive: true});
}
});
sicuramente ho sbagliato qualcosa... qualcuno può aiutarmi?
Grazie
