position:fixed ,锚点定位不准确的问题
解决方案:
参照 stackoverflow 的做法,在主体内容前加一个暗锚
<div class="anmao" id="experts"></div>
<div>主体内容</div>
将锚点进行偏移,并隐藏占位:
.anmao{
height ;
position relative
top -80px
}
如下:暗锚在顶部,并占位导航栏高度

position:fixed ,锚点定位不准确的问题的更多相关文章
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- 当锚点定位遇上position: fixed
<!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- 层模型--固定定位(position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...
- position fixed 相对于父级定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于苹果手机微信端 position: fixed定位top导航栏问题
在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- 关于锚点定位,ul设置fixed后,div被覆盖一部分的问题
例如: 问题: 刚开始的时候 .ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed:那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分. 解 ...
随机推荐
- Bzoj5251 线段树+贪心
Bzoj5251 线段树+贪心 记录本蒟蒻省选后的第一篇题解!国际惯例的题面:首先这个东西显然是一棵树.如果我们把数值排序,并建立这棵树的dfs序,显然dfs序上的一个区间对应数值的一个区间,且根为数 ...
- 「BZOJ 3645」小朋友与二叉树
「BZOJ 3645」小朋友与二叉树 解题思路 令 \(G(x)\) 为关于可选大小集合的生成函数,即 \[ G(x)=\sum[i\in c ] x^i \] 令 \(F(x)\) 第 \(n\) ...
- SlickOne 敏捷开发框架介绍(二) -- 多用户/多租户/SAAS软件基础框架实现
前言:在应用于集团版客户或SAAS平台服务的业务系统中,流程管理系统需要支持多用户组织模型.其中包括角色数据.流程定义数据和流程实例数据的多用户标识绑定.本文旨在全面描述如何基于SlickOne敏捷开 ...
- JavaScript正则表达式在不同浏览器中可能遇到的问题
这两天在用正则表达式搞一个稍微有点复杂的东西,但是不同浏览器之间的差异可浪费了我不少的人参. 现在我把正则表达式在五大主流浏览器(IE.firefox.Chrome.Safari.Opera,以当前版 ...
- ant design Modal关闭时清除数据的解决方案
背景:modal组件关闭时不清除数据,原来输入的数据还存在 解决方案: 1.modal的api:destroyOnClose 2.手动控制modal的销毁 this.state = { destroy ...
- HDU 4778 Gems Fight! (2013杭州赛区1009题,状态压缩,博弈)
Gems Fight! Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 327680/327680 K (Java/Others)T ...
- [Go] Http包 使用简介
请求的结构 HTTP 的交互以请求和响应的应答模式.Go 的请求我们早就见过了,handler 函数的第二个参数 http.Requests.其结构为: type Request struct { M ...
- FFMPEG采集摄像头数据并切片为iPhone的HTTP Stream流
一.Windows下面编译ffmpeg 首先需要解决的问题是:在windows下面编译 ffmpeg, 并让其支持dshow, 本人把ffmpeg编译成功了, 但是编译出来的ffmpeg不支持dsho ...
- hdu Encoding
Encoding Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Subm ...
- Java嵌入式数据库H2学习总结(二)——在Web应用程序中使用H2数据库
一.搭建测试环境和项目 1.1.搭建JavaWeb测试项目 创建一个[H2DBTest]JavaWeb项目,找到H2数据库的jar文件,如下图所示: H2数据库就一个jar文件,这个Jar文件里面包含 ...