锚点定位被顶部固定导航栏遮住的解决方案

最新推荐文章于 2024-04-29 07:30:00 发布
最新推荐文章于 2024-04-29 07:30:00 发布
阅读量416 收藏 1
点赞数 1
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52612511/article/details/130630658
版权

情况如下，点击评价跳到锚点后，顶部导航栏遮住了一部分内容 

只需要 将 scroll-padding-top = 导航栏高度，设置到附滚动条的元素即可

 

qxliik
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
锚点定位内容被遮挡，css解决方案
chjcjchen的博客
07-23 1394
问题：头部header使用position: fixed;，下方内容用锚点定位跳转，内容部分被header遮挡。 解决： 1.在跳转的内容上方加个空div， 2.锚点id加到空div上，空div写css并设置样式 <header></header> <a href="#demo">点击跳转</a> <div class="cli" id="demo"></div> <div class="box">我是要.
css锚点定位被顶部固定导航栏遮住的解决方案
DJxyyy的博客
10-17 869
导航栏中固定定位对锚点链接影响的解决方法
解决点击锚点置顶内容被导航遮住
littlebra的博客
09-25 905
练习项目过程中遇到锚点跳转到顶部，锚点位置的一部分内容被fixed定位的导航给遮盖的问题，在网上找的此种解决方法，记录下来 由于点击锚点，内容会默认置顶，被导航栏遮住。除了写一个js函数将页面滚动到离顶部的具体距离，还有一个比较笨的办法，就是将锚点所在的元素独立出来如下： 1 <a id="M1"style="display:block;height:44px;margin-top:-44px;"></a> 　　给锚点所在元素设高度【元.
CSS--解决目录的锚点定位被顶部导航栏盖住的问题
最新发布
IT利刃出鞘的博客
04-29 1081
本文介绍如何解决目录的锚点定位被顶部导航栏盖住的问题。
Css 锚点 及 锚点吸顶时盖住内容解决方法
wpf_China的博客
11-20 702
锚点： <!-- 前面设置跳转 有标记 且对应 --> <a href="#current-solve"><p>通用解决方案</p></a> <a href="#exper-center"><p>解决方案体验中心</p></a> <!-- 跳转的位置 对应id --> <div id="current-solve">这里是通用解决方案</div> <div i
【锚点】有固定导航栏，锚点到顶部被遮挡
2201_75568521的博客
12-04 147
方法二：padding+margin。方法一：在滚动元素上设置。
【问题解决】web页面html锚点定位后内容被遮挡问题解决【暗锚】
zhangjiuding的博客
01-04 755
【问题解决】web页面html锚点定位后内容被遮挡问题解决
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
总的来说，Vue 中实现导航锚点的平滑滚动和导航栏对应变化，主要是通过监听滚动事件、计算锚点位置以及平滑滚动到目标位置来完成的。这个过程涉及到DOM操作、事件处理以及数据绑定，是 Vue.js 开发中的基础技能。...
详解Vue项目中实现锚点定位
10-17
主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS解决链接锚点定位偏移的代码
09-25
然而，在某些情况下，锚点定位可能会出现偏移问题，即点击链接后，目标元素并没有准确地对齐在可视区域的顶端，而是与滚动条顶部对齐。这个问题通常是由于浏览器的默认行为以及CSS布局特性导致的。 解决锚点定位...
jQuery网页锚点定位 平滑滚动 导航菜单代码
03-30
同时，我们还监听了窗口的滚动事件，当页面向上滚动到一定距离时，给导航栏添加一个`fixed`类，使其变为固定定位，始终显示在屏幕顶部。 至于CSS部分，你需要定义`.hidden`、`.visible`和`.fixed`类，以控制菜单的...
【UI】 锚点定位被导航栏遮住了
amoureux555的博客
11-27 209
锚点定位被顶部固定导航栏遮住的解决方案
修正锚点跳转位置 避免头部fixed固定部分遮挡
weixin_33890526的博客
05-17 811
如下锚点标签： <div id="id1"> 　　<span class="kkAnchor"></span> 　　 正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文 </div> 设置 css .kkAnchor{display: inline-block;w...
scrollIntoView()，滚动到指定区域
qq_38906234的博客
12-10 8067
滚动到指定区域 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIn...
a标签锚点的问题
King Saj
11-21 1193
a便签作为锚点定位页面的位置还是很常见的，基本实现如下： <a href="#person_card" >个人</a> <a href="#company_card" >企业</a> <div id="person_card">个人内容</div> <div id="company_card">企业内容</div> 但是，点击锚点，会使相应内容直接滚动到页面最顶部，如果有一个固顶的导航栏，页面内容就会被覆盖
关于使用固定导航a标签跳锚点时产生问题的解决方法
彭筱桐的专栏
06-30 2219
1、导航固定在头部，a标签跳锚点时，偏移问题。只适用于在当前页面内的锚点跳转html部分代码：<ul class="nav"> <li class="dropdown action"> <a data-ajax="false" href="index.php" class="dropdown-toggle">网站首页</a> </li> <li cla
uniapp 固定导航锚点定位
03-02
UniApp是一种基于Vue.js的跨平台开发框架，可以用于同时开发iOS、Android和Web应用。固定导航锚点定位是指在页面滚动时，导航栏会固定在页面的某个位置，以便用户可以方便地导航到其他部分。 在UniApp中实现固定导航锚点定位可以通过以下步骤进行： 1. 在页面的`<template>`标签中，创建一个固定导航栏的容器，并设置其样式为固定定位： ```html <template> <view> <view class="navbar">导航栏</view> <!-- 页面内容 --> </view> </template> <style> .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #fff; } </style> ``` 2. 在页面的`<script>`标签中，监听页面滚动事件，并根据滚动位置来判断是否需要固定导航栏： ```javascript <script> export default { onReachBottom() { // 监听页面滚动事件 uni.pageScrollTo({ scrollTop: 0, // 滚动到顶部 duration: 300 // 滚动动画时长 }) } } </script> ``` 这样，当页面滚动时，导航栏会固定在页面的顶部位置。你可以根据实际需求来调整导航栏的样式和滚动位置的判断条件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值