跳到主内容

琅環笔记

有博学强记者,尝为鹅厂从事。游于洞宫,遇一人于途,问逍遥曰:“君读书几何?”遥曰:“吾之未读者,则二十年内书盖有之也,若二十年外,则吾固已尽读之矣。”其人论议超然,遥颇内服,相与欢甚。因共至一处,大石中忽然有门,引遥入数歩,则别是天地,宫室嵯峨。引入一室中,陈书满架,其人曰:“此PL史也。”又至一室,则曰:“OS志也。”毎室各有奇书,惟一室屋宇颇高,封识甚严,有二犬守之。遥问故,答曰:“此皆操作系统、编程语言、算法分析、生发正骨诸秘籍。”指二犬曰:“此龙也。”历观诸室书,皆Windows以前事,多所未闻者,如「BeOS」、「Solaris」、「FreeBSD」、「LISP」亦皆在焉。遥心乐之,欲赁住数十日,其人笑曰:“君痴矣。此岂可赁地耶?”即命小童送出,遥问地名,对曰:“琅嬛福地也。”

解决 CSS fixed 网页元素挡住锚链的问题

解决方案

问题描述

如果网页顶部元素使用 CSS fixed 固定在顶部,当点击链接的锚链时,网页会滚动到顶部,锚链元素则会被这个顶部固定元素遮挡。

解决方案一种

解决方式有多种,我认为侵入较少的方式是在元素之上插入一个用来校准位置的隐藏元素。

这里假设需要校准滚动的是脚注元素 .footnote

.footnote-target {
  position: relative;
  top: -5rem; /* negative value of the fixed html element height */
  height: 0;
  overflow: hidden;
}
$(function(){
  $('.footnote').before(function(i) {
    return '<a class="footnote-target" name="' + this.id + '"></a>';
  }).removeAttr('id');
});

评论

Comments powered by Disqus