开发遇到的一些坑

锚点

常见的锚点实现方式有好几种，采用h5提供的API scrollIntoView()来实现，实现的主要代码如下：

let anchorElement = document.getElementById(id);

if (anchorElement) {

anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });

}

这种方式实现锚点是没有问题的。

遇到的坑：

场景：页面中间部分会有锚点导航，点击定位到锚点部分，当锚点内容部分超过一屏时会在屏幕上方fixed一个锚点导航。

之前的实现方式：fixed出现的导航和页面中间的导航共用一套dom，fixed时改变这套dom的样式就行。

问题：锚点定位不准确（fixed出现和不出现时锚点定位都不准确，没有fixed时，锚点内容位置会少2倍的导航高度）

解决方案：

 fixed后锚点内容定位不准确的一般解决方式就是：给锚点内容加个paddingTop:fixed的导航高度。再加一个marginTop:负的fixed的导航高度。

再次遇到的问题：这么解决之后，fixed后的导航锚点定位没有问题了，但是没有fixed的导航定位还存在问题，显示还缺少一个导航的高度。那怎么解决呢？

出现这样的问题：由于两者共用一套dom，当fixed导航出现时，之前文档流中导航部分没有了，所以导致锚点还缺少了一个导航的高度。

解决方案：两者分开，写两套dom，用display来控制显示哪个。让文档流中的导航一直处于占位的状态。