问题：页面内容导航fixed+锚点错位

solution：

锚点定位跟外边距没有关系。 我们使用内边距padding-top=fixed导航高度来使锚点可以精准定位；

此时新的问题产生了，内边距的存在让页面排版不完美了，我们使用margin-top=-fixed导航高度来抵消内边距，完美解决；

summary：

内边距对锚点定位有效，外边距对锚点定位无效。

当锚点遇到fixed的更多相关文章

  1. 二十一、当锚点遇到fixed（margin和padding）

    当锚点点击跳转的时候,如果上方有fixed,锚点跳转会默认跳转到top为0的地方,有一部分就被遮挡了 解决方法:(像素值随便给的) 给锚点跳转到的具体内容加padding-top:-50px:marg ...

  2. 修正锚点跳转位置 避免头部fixed固定部分遮挡

    如下锚点标签: <div id="id1"> <span class="kkAnchor"></span> 正文正文正文正文 ...

  3. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  4. position:fixed ，锚点定位不准确的问题

    解决方案: 参照 stackoverflow 的做法,在主体内容前加一个暗锚 <div class="anmao" id="experts">< ...

  5. 关于锚点定位，ul设置fixed后，div被覆盖一部分的问题

    例如: 问题: 刚开始的时候 .ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed:那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分. 解 ...

  6. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  7. 鼠标滚动div固定浮动-加锚点

    页面:    <div class="pa">        <div class="w-95-sl bdl-2"><a>标 ...

  8. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  9. jQuery实现锚点平滑定位

    一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...

随机推荐

  1. 批量插入一张表的数据，并且生成不同的uuid 字符截取 批量更新 去除重复数据

    INSERT INTO party_branchSELECT UUID(),m.name,m.secreta_name,m.contacts_name,m.contact_phon,m.categor ...

  2. vue项目使用 prerender-spa-plugin 预渲染

    由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...

  3. WebSocket整合SSM(Spring,Struts2,Maven)

    一.WebSocket与HTTP长轮询 WebSocket 属于HTML5 规范的一部分,提供的一种在单个 TCP 连接上进行全双工通讯的协议.允许服务端主动向客户端推送数据.在 WebSocket ...

  4. ASP.NET Core中使用GraphQL - 第三章 依赖注入

    ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 SOL ...

  5. Linux - 通过LVM对磁盘进行动态扩容

    目录 1 LVM是什么 1.1 概念解释 1.2 为什么用LVM 1.2.1 不使用LVM时的扩容思路 1.2.2 使用LVM时的扩容思路 1.3 名词解释 2 普通的挂载磁盘方法 2.1 创建分区的 ...

  6. Python捕捉系统信号

    #!/usr/bin/env python # -*- coding: utf-8 -*- import signal import sys """ Python捕捉中断 ...

  7. 系列文章｜OKR与敏捷（二）：实现全栈敏捷

    OKR与敏捷开发的原理有着相似之处,但已经使用敏捷的团队再用OKR感觉会显得多余.这种误解的根源就在于对这两种模式不够了解,运用得当的情况下,OKR和敏捷可以形成强强联合的效果,他们可以创造出以价值为 ...

  8. python学习第八讲,python中的数据类型,列表,元祖,字典,之字典使用与介绍

    目录 python学习第八讲,python中的数据类型,列表,元祖,字典,之字典使用与介绍.md 一丶字典 1.字典的定义 2.字典的使用. 3.字典的常用方法. python学习第八讲,python ...

  9. C# 在PPT中绘制形状（shape）

    概述 本篇文章将介绍C# 在PPT幻灯片中操作形状(shape)的方法.这里主要涉及常规形状,如箭头.矩形.圆形.三角形.多边形.不规则形状等.下面的示例中,可以通过绘制形状,并设置相应格式等.示例包 ...

  10. 阿里、百度等多家公司Java面试记录与总结

    算算自己大概面试了近十家公司,也拿到了几个Offer,现在面试告一段落,简单总结下面试经验. 我现在主要的方向是Java服务端开发,把遇到的问题和大家分享一下,也谈谈关于技术人员如何有方向的提高自己, ...