例如:

问题:

刚开始的时候 。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被覆盖一部分的问题的更多相关文章

  1. HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...

  2. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  3. css中hover设置边框后div中内容后移解决方法

    <style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...

  4. html中设置锚点定位的几种常见方法(#号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

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

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

  6. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...

  7. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

  8. safari浏览器fixed后,被软键盘遮盖的问题—【未解决】

    safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯. 问题描述 测试环境:ios 10.2/10.3 简单来说就是在html5页面中底部 ...

  9. 移动端设置fixed布局的问题解决

    最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...

随机推荐

  1. grpc-java 生成代码路径设置

    grpc-java 生成代码路径设置 <plugin> <groupId>org.xolstice.maven.plugins</groupId> <arti ...

  2. paperfree

    主题:免费的论文查重网站 正文:给大家推荐一个免费的论文查重网站PaperFree:http://www.paperfree.cn

  3. [GO]结构体成员的使用:指针变量

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  4. Java Project 转 Dynamic Web Project

    使用eclipse 工具, 右键Java Project 项目 Properties - Project Facets  - Convert to faceted form... - 勾选Dynami ...

  5. requestAnimationFrame 定时器

    这个方法是通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并 ...

  6. Mysql自动设置时间(自动获取时间,填充时间)

    应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,不需要应用程序去特意记录,而由数据数据库获取当前时间自动记录创建时间: 2.在数据库中,要记录每条数据是什么时候修改的,不需要应用程序去特意 ...

  7. vmware虚拟机监控数据

    在vsphere产品中内建一个监控所有虚机包括主机资源的插件,叫做vcenter servcie status,这个插件的主要功能是记录当前虚拟机资源的cpu.硬盘.内存和网络等相关信息.通过它可以查 ...

  8. How to:Aborting a long running task in TPL

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/d0bcb415-fb1e-42e4-90f8-c43a088537fb/aborting- ...

  9. 腾讯云通信UserSig生成.Net实现

    腾讯云通信后台生成usersig只有java实现代码.以下是根据java代码转换为net实现,java版GitHub地址:https://github.com/TencentVideoCloudMLV ...

  10. C#在线运行

    初步完成c#代码的在线编辑.       首先,传回前端的c#在线代码,进行预编译,用CSharpCodeProvider这个方法.设置编译版本3.5 设置编译参数GenerateInMemory:是 ...