例如:

问题:

刚开始的时候 。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. 06 Counting Point Mutations

    Problem Figure 2. The Hamming distance between these two strings is 7. Mismatched symbols are colore ...

  2. MySQL 授权,回收权限,查看权限

    show GRANTS for root@localhost;flush privileges;SHOW PROCESSLIST; #全局授权,回收权限GRANT ALL ON *.* TO 'tes ...

  3. 编写高质量代码改善C#程序的157个建议——建议72:在线程同步中使用信号量

    建议72:在线程同步中使用信号量 所谓线程同步,就是多个线程在某个对象上执行等待(也可理解为锁定该对象),直到该对象被解除锁定.C#中对象的类型分为引用类型和值类型.CLR在这两种类型上的等待是不一样 ...

  4. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  5. Enum , Enum Class ?

    使用Enum还是Enum Class? 根据Enum和Enum Class的特点,我们可以根据对常量类型的要求决定使用Enum还是Enum Class. 以下场景适合使用Enum: 常量类型用于内部表 ...

  6. linux 系统启动

    系统启动流程 BIOS 我们称之为基本输入输出系统,一般保存在主板上的BIOS芯片中,负责检查硬件并且查找可启动设备:可设置启动顺序: 如果一个设备是可启动,那么第一个扇区512字节的最后两字节是55 ...

  7. How to use the NFS Client c# Library

    类库下载 I add a wiki page that explains how to use the NFS Client c# .net library in your project. Neko ...

  8. .net core i上 K8S(七).netcore程序的服务发现

    上一章我们分享了k8s的网络代理模式,今天我们来分享一下k8s中的服务发现. 1.环境变量模式的服务发现 k8s默认为我们提供了通过环境变量来实现服务发现的功能,前提是 1.需要service在pod ...

  9. Eclipse中mvn install 报错error in opening zip file

    报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...

  10. Mysql数据操作《二》单表查询

    单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 关键字的执行 ...