关于锚点定位,ul设置fixed后,div被覆盖一部分的问题
例如:

问题:
刚开始的时候 。ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed;那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分。
解决办法:
给div里边加了一个a,判断当滚动条滚动到一个程度就 给ul为 position:fixed,a标签就设置绝对定位向下移动比 ul高度有一点的 距离就可以了。
html:
<div class="culture_activity_left left">
<ul class="clear site_lis">
<li class="now_page"><a href="#teacher">主讲简介</a></li>
<li><a href="#activity_show">活动介绍</a></li>
<li><a href="#activity_say">活动声明</a></li>
<li><a href="#notice">注意事项</a></li>
<li><a href="#activity_assess">活动评价<span>(156)</span></a></li>
</ul>
<div>
<a href="javascript" id="teacher"></a>
<div class="h_title"><h3>主讲简介</h3><img src="data:images/wd.png"></div>
<p>
内蒙古歌舞团(原内蒙文工团)成立于1946年4月,由蒙、汉、满、回、达斡尔、鄂温克、朝鲜等十几个民族的280余名演职员组成。
</p>
</div>
<div class="activity_show">
<a href="javascript" id="activity_show"></a>
<div class="h_title"><h3>活动介绍</h3><img src="data:images/wd.png"></div>
<p>
内蒙古歌舞团(原内蒙文工团)成立于1946年4月,由蒙、汉、满、回、达斡尔、鄂温克、朝鲜等十几个民族的280余名演职员组成。 </p>
<p>
歌舞团现有主要艺术家:道尔吉(一级品笛子独奏《鄂尔多斯的春天》、《走西口》)、金花(一级演员,代表作品歌曲《乳香飘》、《黑缎子坎肩》)、千亚丽(一级演员,代表作品《多彩的节奏》)等。
</p>
<div class="activity_show_img">
<img src="data:images/dauce_03.png">
</div>
</div>
<div>
<a href="javascript " id="activity_say"></a>
<div class="h_title"><h3>活动声明</h3><img src="data:images/wd.png"></div>
<p>
内蒙古歌舞团(原内蒙文工团)成立于1946年4月,由蒙、汉、满、回、达斡尔、鄂温克、朝鲜等十几个民族的280余名演职员组成
</p>
</div>
<div>
<a href="javascript " id="notice"></a>
<div class="h_title"><h3>注意事项</h3><img src="data:images/wd.png"></div>
<p>
内蒙古歌舞团(原内蒙文工团)成立于1946年4月,由蒙、汉、满、回、达斡尔、鄂温克、朝鲜等十几个民族的280余名演职员组成。
</p>
</div>
<div class="activity_assess">
<a href="javascript " id="activity_assess"></a>
<div class="h_title"><h3>活动评价</h3><img src="data:images/wd.png"></div>
<div class="after_login_online"></div>
</div>
</div> css:
.culture_activity_left .site_lis{
border: 1px solid #cccccc;
margin: 40px 0 30px 0;
width:866px;
background: #fff;
}
.culture_activity_left>div{
margin-top: 30px;
position: relative;
border:1px solid #000;
width:1000px;
height:200px;
}
.culture_activity_left>div>p{
line-height: 30px;
}
.culture_activity_left>div>a{
display: inline-block;
}
.culture_activity_left .site_lis li{
border-right: 1px solid #cccccc;
padding: 0 14px;
height: 36px;
line-height: 36px;
text-align: center;
float: left;
}
.culture_activity_left .site_lis li a {
font-size: 18px;
color: #3f3f3f;
}
.culture_activity_left .site_lis li.now_page {
border-top: 2px solid #01aefd;
}
.culture_activity_left .site_lis li.now_page a {
color: #01aefd;
}
JQ:
$(document).ready(function () {
//ul li选中状态
$(".site_lis li").click(function () {
$(this).addClass("now_page").siblings().removeClass("now_page");
});
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
if (scrollTop >= 750) { //判断条件
$(".site_lis").css({"position": "fixed", "top": "-40px", "z-index": "10"}); //ul 设置 fixed
$(".site_lis li").click(function () {
var index = $(".site_lis li").index(this);
$(".culture_activity_left>div>a").eq(index).css({ //a标签 下移
"position": "absolute",
"top": "-50px",
"left": "0"
});
})
} else {
$(".site_lis").css({"position": "initial"});
$(".site_lis li").click(function () {
var index = $(".site_lis li").index(this);
$(".culture_activity_left>div>a").eq(index).css({
"position": "absolute",
"top": "-130px",
"left": "0"
});
})
}
})
})
关于锚点定位,ul设置fixed后,div被覆盖一部分的问题的更多相关文章
- HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- css中hover设置边框后div中内容后移解决方法
<style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 当锚点定位遇上position: fixed
<!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...
- vue滑动吸顶以及锚点定位
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- safari浏览器fixed后,被软键盘遮盖的问题—【未解决】
safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯. 问题描述 测试环境:ios 10.2/10.3 简单来说就是在html5页面中底部 ...
- 移动端设置fixed布局的问题解决
最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...
随机推荐
- Word文档如何发CSDN博客
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- Android Lint——内嵌于Android Studio的代码优化工具
Android Lint工具是Android Studio 自带的静态代码工模具,Android Lint是专门针对Android 定制的检查规则,因此可以检查出很多Android特有的代码缺陷.建议 ...
- [你必须知道的异步编程]——异步编程模型(APM)
本专题概要: 引言 你知道APM吗? 你想知道如何使用异步编程模型编写代码吗? 使用委托也可以实现异步编程,你知道否? 小结 一.引言 在前面的C#基础知识系列中 介绍了从C#1.0——C#4.0中一 ...
- 【前端布局】px与rpx的简述
本文只以移动设备为例说明. 注意:设计师以iphone6为标准出设计稿的话,1rpx=0.5px=1物理像素.Photoshop里面量出来的尺寸为物理像素点.所以可以直接使用标注尺寸数据. [像素Pi ...
- scala文件流操作,生成sparkpv,uv作业文件
package com.bjsxt.scalaspark.core.examples.pvAnduv import java.io.Fileimport java.text.SimpleDateFor ...
- 【C#】泛型
泛型是一个非常有用的技术,在博客园里面有太多说到泛型的好文章,这里我推荐一篇我个人觉得非常全面,也非常齐全的文章. (重造轮子很傻!!!) C# -- 泛型(1) C# -- 泛型(2) C# -- ...
- Arcgis Android 手动搭建开发环境
前言 本文为大家分享arcgis android 环境的手动搭建过程,默认你懂一定的java和android 基础知识,已经有android的开发环境.如缺乏以上环境和知识,请自行补充. 版本介绍 A ...
- android hook getdeceiveid
很多手机软件使用了手机绑定.QQ,微信等.如果使用了不同的设备,则需要验证码. 要用一台手机来模拟与另一台手机一样环境,估计hook 系统的相关函数可以实现. 想着应该有现成的软件的,例如 smart ...
- sql server不用安装sql管理工具开启sa
今天无意间发现腾讯云镜像有windows server2016,追求新系统的我,马上就重装了云服务器.重装完后发现,配置太低,远程桌面都变得不是很顺畅,于是装完sql server2016后便不打算另 ...
- 判断客户端是iOS还是Android,判断是不是在微信浏览器打开
bool flag = false; string agent = System.Web.HttpContext.Current.Request.UserAgent.ToLower(); string ...