问题：页面内容导航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. openlayers4 入门开发系列之地图空间查询篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. Android-原笔迹手写的探索与开发

     前言 这篇文章主要是关于移动端原笔迹的开发,让平板上的手写效果达到笔迹光滑且有笔锋. 介绍关于原笔迹的算法思路. 项目github地址 算法思路分析 曲线拟合算法 利用曲线拟合算法增加虚拟的点,使得 ...

  3. cmd实现cab文件的压缩与解压

    压缩(makecab): 1.单文件压缩 makecab ip2.txt ip2.txt.cab 2.多文件压缩 makecab /f c:\list.txt /d expresstype=mszip ...

  4. Windows10文件目录下添加 Shift+右键打开管理员Powershell窗口

    背景(可略过) 目前在调试 Python 程序,遇到了一个问题:当程序中包含多线程时,使用 IDLE 运行是不会执行多线程的语句的,在网上一顿搜罗了解到这种情况可以换成在命令行下执行.好像用 PyCh ...

  5. 使用async await 封装 axios

    异步变同步: 厉害-- https://www.jianshu.com/p/4168efdc172b

  6. 又双叒叕换，微软这次换Edge了

    http://tech.sina.com.cn/it/2018-12-06/doc-ihmutuec6481129.shtml 其实两个月前跟一个微软的前同事聊天已经听说过微软要基于Chromiun来 ...

  7. InkImageDataSetGenerator-开源一个可用于机器学习的书写轨迹图片生成的小工具

    这是一个简单易用的图片数据集生成小工具,基于OpenCV和UWP Ink API,它可以根据指定的手写轨迹生成一系列各个角度的图片.每张图片的尺寸和总体数量都是可以指定的,均存放在统一的生成目录中.h ...

  8. Vue 进阶之路（一）

    vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...

  9. ASP.NET Core Web API 版本控制

    在nuget.org上,您可以找到  Microsoft.AspNetCore.Mvc.Versioning包,它提供了有关如何对Web API端点进行版本化的更多选项.这个包的好处是允许你直接在控制 ...

  10. qml demo分析(objectlistmodel-自定义qml数据)

    一.效果展示 如图1所示,是一个ListView窗口,自定义了文本内容和项背景色. 图1 ListView 二.源码分析 代码比较简单,主要使用了QQmlContext类的setContextProp ...