Question

我有以下情况：

我有一个对象及其初始位置；

当页面滚动开始时，我需要此对象开始向下移动并靠近中心，并且当滚动达到100vh（在下面的示例中为“ sectionHeight”）时，我需要将其放置在屏幕并比初始尺寸大1.49。

我真的在数学上苦苦挣扎，因为我无法想出一种如何正确计算对象的方式的方法，到目前为止，我只是想出了以下代码来改变位置（但这只是随机数字尝试匹配最终结果）：

if(window.pageYOffset < sectionHeight && window.pageYOffset > 0) {
            productToExpand.style.position = 'absolute';
            productToExpand.style.top = productToExpandPosition.top + window.pageYOffset + 'px';
            productToExpand.style.left = productToExpandPosition.left + window.pageYOffset / 2 + 'px';
        } else if(window.pageYOffset === 0) {
            productToExpand.style.position = 'unset';
        }   else if (window.pageYOffset > sectionHeight) {
            productToExpand.style.top = 1.5 * sectionHeight - productImageToExpand.offsetHeight / 2 + 'px';
            productToExpand.style.left = 'calc(50% -' + ' ' + (productImageToExpand.offsetWidth / 2 + productToExpandPositionLeft) + 'px)';
        }

在这里，我真的无法提出尺寸更改公式。如果有人可以帮助我，我将非常感激。

Answer 1

这就是我对您的查询的理解。我已经使用了一些零碎的代码，并添加了一些代码。我已经在代码中加上了注释。

    var sectionHeight = vhToPixels(100); // section height in pixels
    var sectionWidth = vwToPixels(100); // section Width in pixels
   //console.log(sectionHeight + "  " + sectionWidth);
    
    var productToExpand = document.getElementById('image1');
    var productToExpandPosition;
    var imgHeight = productToExpand.clientHeight;
    var imgWidth = productToExpand.clientWidth;
    
    var multiplier;
    
    window.onscroll = function() {myFunction()};
    
    function myFunction() {
        //console.log(window.pageYOffset + " " + window.pageYOffset/2 + "  "  );
        if(window.pageYOffset < sectionHeight && window.pageYOffset > 0) {
            productToExpand.style.position = 'absolute';
            productToExpand.style.top =  window.pageYOffset + 'px';
            productToExpand.style.left =  window.pageYOffset / 2 + 'px';
            
            if((window.pageYOffset/500)  < 1) {
                multiplier = 1;
            }
            else {
                multiplier = (window.pageYOffset/500);
            }
            
            productToExpand.style.height = imgHeight * multiplier  + "px";
            productToExpand.style.width = imgWidth * multiplier + "px"; 
            
            
            //console.log(productToExpand.clientHeight + " " + productToExpand.clientWidth);
            console.log(window.pageYOffset/500);
            
        } else if(window.pageYOffset === 0) {
            productToExpand.style.position = 'unset';
            productToExpand.style.height = imgHeight  + "px";
            productToExpand.style.width = imgWidth  + "px";                
        }   else if (window.pageYOffset > sectionHeight) {
            //console.log("HERE");
            productToExpand.style.top = 1.5 * sectionHeight - productToExpand.offsetHeight / 2 + 'px';
            //console.log(productToExpand.style.top);
            productToExpand.style.left = sectionWidth + ' ' + (productToExpand.offsetWidth / 2 ) + 'px)';
            //console.log(productToExpand.style.left);
            productToExpand.style.height = imgHeight * 1.49 + "px";
            productToExpand.style.width = imgWidth * 1.49 + "px";
            
            console.log(productToExpand.clientHeight + " " + productToExpand.clientWidth);
        }            
        
    }
    
    function vhToPixels (vh) {
        //return Math.round(window.innerHeight / (100 / vh)) + 'px';
        return Math.round(window.innerHeight / (100 / vh));
    }
    function vwToPixels (vw) {
        //return Math.round(window.innerHeight / (100 / vh)) + 'px';
        return Math.round(window.innerWidth / (100 / vw));
    }

根据pageYOffset计算比例和位置变化

1 个答案: