Question

我打算为学校项目创建一个视差滚动网站。

对于我的网站，我需要修复4个部门，即屏幕图形（等等笔记本电脑屏幕，手机屏幕）到页面顶部，当我滚动一定量的内容时，修复“屏幕” “师将改为下一个屏幕。

它类似于Google Calendar About Us页面，其中内容将在电话屏幕上滚动，但现在有4个屏幕。它的灵感来自于ihatetomatoes的Gameboy 25周年纪念页面。我不知道如何去做这件事。

我知道如何将分区固定到屏幕顶部，但我不知道如何在内容达到下一个固定div的一定像素数量时将此固定分区滚动起来。

此外，我想问一下，如果背景也能滚动整个页面的某些像素，因为“屏幕”图形不会在整个屏幕上延伸。

对不起，如果这是啰嗦，感谢您的帮助：）

Answer 1

这听起来像一个很酷的学校项目。您可以使用css和javascript来滚动图片，如下所示：

CSS：

#picDIV/*make a div with all the pictures side by side*/{
overflow-x: auto;
}
#imgId/*The only way i can think of to put images side by side is to asign each one a position like this*/{
position: absolute;
left: /*to the left of your previous pic*/;
}

的Javascript / JQuery的：

function scroll (){
    $("#picDIV").scrollleft(/*specify in pixles where next image is*/);
}

HTML：

<html>
  <body>
  <div id="picDIV"><!--Side by side images--><img class="img" src=""><img class="img" src=""></div>
<button onclick="scroll()">Scroll Left</button>
</body>
</html>

至于使用整个页面，除了使用$("body").scrollTop(/*# of pix*/)之外，你可以做同样的事情。

如何将分区多个分区固定到屏幕顶部（视差滚动网站帮助）

1 个答案: