视差滚动部分不固定/100% 高度？

Posted 2023-05-08

【中文标题】视差滚动部分不固定/100% 高度？

【英文标题】：Parallax scrolling with sections at not-fixed/100% height?

【发布时间】：2014-03-27 00:49:56

【问题描述】：

我一直在使用一些 javascript 来实现我想要的视差滚动。直到现在我才在 22 英寸 iMac 上看到它，而且我知道它的像素高度会成为一个问题，尤其是对于本网站的风格而言。

html 使用带有 CSS 的部分：

.pages 
min-height: 1050px;
height: 1050px;
margin: 0 auto;
width: 100%;
min-width: 1024px;
position: relative;

脚本：

$(document).ready(function()
    // Cache the Window object
    $window = $(window);

   $('section[data-type="background"]').each(function()
     var $bgobj = $(this); // assigning the object

      $(window).scroll(function() 

        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';


        $bgobj.css( 
     backgroundPosition: coords,
     '-webkit-background-size': 'cover',
     '-moz-background-size': 'cover',
     '-o-background-size': 'cover',
     'background-size': 'cover'

             );

); // window scroll Ends

 );    

); 

/* 
 * Create HTML5 elements for IE's sake
 */

document.createElement("article");
document.createElement("section");

所以，如果有人可以帮助我解决这两个/任何一个问题：

如何使部分的高度为用户屏幕的 100%？简单地将 height 和 min-height 更改为 100% 不会这样做 - 部分“消失”。

是否可以更改此脚本，以便从图像的中心（高度）而不是从左上角调整图像的大小？

【参考方案1】：

我使用 jquery 构建了一个视差站点，发现这两个变量在我的代码中弹出：

var height = $(window).height();
var depth = $(window).scrollTop();

您可以使用这些来确定最终用户屏幕的高度以及他们当前向下滚动页面的距离。第一个名为 height 的变量应该可以解决问题。 scrollTop() 将为您提供当前屏幕顶部到整个页面顶部的位置（以像素为单位）。

不，您不能从图像的中心调整图像的大小，但这应该不是一个大问题，只是需要更多的时间和计算

【讨论】：

我本身并没有编写视差脚本（或任何 javascript）——在我引用的视差 javascript 中，我什至会放 '$(window).height();' ?

@user3323016 就在 $window = $(window); 之后称呼。然后，您可以在整个代码中使用高度和深度变量。

【参考方案2】：

在您的代码中添加更多信息也不错。

但是你必须在 (document).ready 上运行类似的东西 事件：

var windowHeight = $(window).height();
$('.pages').height.css('height', windowHeight)

如果它是响应式的，我建议在调整大小事件上也运行它。

如果您创建一个 jsfiddle 或其他东西，也许我可以帮助您。但我需要看看你的代码。

【讨论】：

好的，如果你能快速看一下，我将不胜感激：jsfiddle.net/hB55a