随页面锚移动的Javascript/CSS箭头

Javascript/CSS arrows that move with page anchors?

本文关键字：Javascript CSS 箭头 移动      更新时间：2023-09-26

我试着检查这个网站的元素，但我不明白当点击不同的页面锚时，他们是如何让CSS三角形移动到不同的导航元素的。

请访问网站：www.simple.com

箭头是包含在http://simple.com/img/sprites.png中的CSS精灵。它在CSS中设置，转换如下：

#main-nav #nav-arrow {
    -webkit-transition: left opacity;
    -moz-transition: left opacity;
    -o-transition: left opacity;
    transition: left opacity;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    width: 22px;
    height: 14px;
    position: absolute;
    top: 60px;
    text-indent: -10000px;
    background: url("/img/sprites.png") no-repeat -577px -52px
}

当CSS的left属性发生更改时，这将执行动画。left属性由从主导航库中钩住的Javascript更改，主导航库驱动（自定义和缩小）https://www.simple.com/js/brawndo.min2175719530.js中的站点NavSimple。进行导航的更通用的NavSimple代码也会触发自定义Javascript，将箭头的左侧位置移动到活动导航元素的中间位置（因为箭头宽22像素，所以它减去了11个像素）：

this.nav_arrow.setStyle("left",d.getPosition(this.nav_wrapper).x+(d.getWidth()/2-11))}

基本上就是这样。不错的网站，非常好的工程，我想说。（导航箭头实际上是一个包含字母"V"的div，所以即使背景图像没有加载，它看起来仍然像一个箭头，我认为这是一个很好的触摸。）

说了这么多，我认为这个问题可能有点太具体了，无法生存。。。

在页面滚动到指定内容之前，三角形似乎不会移动。您可以使用window.scrollY值来评估三角形应该移动到哪个按钮。

我猜三角形的动画是由一个函数完成的，该函数在window.onscroll事件中都被调用。并通过回调按钮触发滚动动画功能。

是的，这个网站上有一些非常酷的东西。它都是CSS转换，我希望使用Adobe Edge或更少的类似功能。

brawdndo.js似乎是moo增长输入的一部分

此处演示http://www.ohloh.net/p/moo-growing-input

来源于此https://github.com/3n/moo-growing-input

我敢打赌，这只是JavaScript对三角形的动画，你不可能在纯CSS中做到这一点。

相关文章：