资讯专栏INFORMATION COLUMN

锚点偏移

kelvinlee / 1200人阅读

摘要:参照的做法,在主体内容前加一个暗锚主体内容将锚点进行偏移,并隐藏占位偏移值也可以这样,使用去调整值主要修复评论定位不准确主要修复评论定位不准确可能会让第二条评论向下偏移,但是把回复按钮给遮挡了导致回复按钮点击不了。

参照 stackoverflow 的做法,在主体内容前加一个暗锚:


主体内容...

将锚点进行偏移,并隐藏占位:

.target-fix {
    position: relative;
    top: -44px; // 偏移值
    display: block;
    height: 0;
    overflow: hidden;
}

也可以这样,使用javascript去调整scroll值

if (window.location.hash.indexOf("#") >= 0) {
    $("html,body").animate({
        scrollTop: ($(window.location.hash).offset().top - 50) + "px"
    },
    300);
}; //主要修复评论定位不准确BUG
$("#comments a[href^=#][href!=#]").click(function() {
    var target = document.getElementById(this.hash.slice(1));
    if (!target) return;
    var targetOffset = $(target).offset().top - 50;
    $("html,body").animate({
        scrollTop: targetOffset
    },
    300);
    return false;
}); //主要修复评论定位不准确BUG

padding-top 可能会让第二条评论向下偏移50px,但是把回复按钮给遮挡了!导致回复按钮点击不了。反复调整z-index改变层的顺序,仍然无果!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116496.html

相关文章

  • 锚点偏移

    摘要:参照的做法,在主体内容前加一个暗锚主体内容将锚点进行偏移,并隐藏占位偏移值也可以这样,使用去调整值主要修复评论定位不准确主要修复评论定位不准确可能会让第二条评论向下偏移,但是把回复按钮给遮挡了导致回复按钮点击不了。 参照 stackoverflow 的做法,在主体内容前加一个暗锚:

    Fundebug 评论0 收藏0
  • 浅说虚拟列表的实现原理

    摘要:虚拟列表的实现有多种方案,本文以组件为基础进行分析。常见的无限滚动便是延迟渲染的一种实现,而虚拟列表则是按需渲染的一种实现。接下来,本文会简单介绍虚拟列表的一种实现方案。实现本章节将会创建一个组件,并结合代码,慢慢梳理虚拟列表的实现。 在 列表数据的展示优化 一文中,提到了对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分...

    赵春朋 评论0 收藏0
  • 可视化效果(Visual effects)

    摘要:一般地,一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下,元素不会被裁剪。在闭合路径内的内容会显示,而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地,一个块盒的内容都被限制在该盒的content边内。某些情况下,一个盒可能会溢出,意味着它的部分内容或者全部内容位于该盒外部,例如: 一行无法拆分,导致行盒比...

    JowayYoung 评论0 收藏0
  • 为你的博客添加目录索引

    摘要:我采用了遍历树,然后找到文章的标签暂时只对标签建立索引,为其添加的方式建立索引。初始化文章锚点和目录数据结构找到属于文章内容的标签添加标签文本内容记录当前标签的偏移量,方便后面计算滚动距离。 一、前言 演示图例 showImg(https://segmentfault.com/img/remote/1460000016099128?w=1547&h=894); 需求 这个目录索引应该包...

    SwordFly 评论0 收藏0
  • 像玩乐高一样拆解Faster R-CNN:详解目标检测的实现过程

    摘要:这一切始于年的一篇论文,其使用了称为的算法用来提取感兴趣候选区域,并用一个标准的卷积神经网络去分类和调整这些区域。 本文详细解释了 Faster R-CNN 的网络架构和工作流,一步步带领读者理解目标检测的工作原理,作者本人也提供了 Luminoth 实现,供大家参考。Luminoth 实现:https://github.com/tryolabs/luminoth/tree/master/l...

    taoszu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<