我试图让一个内容块始终显示给用户,即使他向下滚动页面.他还应该能够在内容块中上下滚动.这是一个带有精简版的小提琴,向您展示我的意思:
当向下滚动时,应该注意到,直到到达红色块的底部,它将把块固定在窗口上,当向上滚动时,它将它放回去.
在Firefox中,可以上下滚动,上面描述的固定/解除固定是不可察觉的 - 像丝绸一样光滑.
然而,一旦尝试在Chrome或IE中滚动,看起来滚动事件就会滞后,人们可以看到块"毛刺"一秒钟.这不是代码延迟 - 它似乎与浏览器有关.
有没有什么办法解决这一问题？我的智慧结束了.
我很欣赏有关如何以不同的方式达到同样效果的建议......谢谢
这是我迄今为止在stackoverfow本身的朋友的帮助下所做的.
它工作正常,但我想做一个对我来说有点复杂的动画.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() { …