如何将所有元素保持在粘性位置,直到调用触发器?

时间:2019-03-05 07:26:52

标签: javascript css scroll css-position sticky

我有一个页面,其中滚动时图像尺寸减小。一旦达到特定大小,就会出现另一张图像。从那里开始,滚动行为应该与滚动学习方法相同。

我现在的问题是所有后续import requests import json data = { "Device[udid]": "", "API_KEY": "", "API_SECRET": "", "Device[change]": "", "fbToken": "" } headers = { "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36" } url = "https://vik-game.moonactive.net/api/v1/users/rof4__cjsvfw2s604xrw1lg5ex42qwc/balance" r = requests.post(url, data=data, headers=headers) data = r.json() print(data["coins"]) 都没有“等待”此图像更改事件。我只能告诉随后的第一个div停止直到该事件发生,并在事件发生后将其div更改为position。但是有了这种解决方案,它似乎更加混乱了。

Here is a JSFiddle with a sample setup.我希望在出现红色div之前,文本div都不会移动。然后它应该从当前位置开始移动。

1 个答案:

答案 0 :(得分:1)

我可以自己(以某种方式)解决问题。

我在带有图片的div之后的所有内容中添加了一个容器div,并使其为opacity: hidden。滚动时,内容实际上是向上滚动,但是看不到。图像更改后,我将使用滚动距离的值(加上一些缓冲区)向内容容器添加margin-top,并删除opacity: hidden类。

Here is a JSFiddle

但是,这不是问题中描述的解决方案,在该解决方案中,内容应该可见并在其位置“等待”,但就我的情况而言,这是可以接受的答案。但是,我不会将其作为我的问题的可接受答案。