关于锚点定位,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或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...
随机推荐
- Go 面向对象概念
前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...
- Selenium模拟浏览器初识
Seleniumd介绍 在写Python爬虫的时候,最麻烦的不是那些海量的静态网站,而是那些通过JavaScript获取数据的站点.Python本身对js的支持不好,所以就有良心的开发者来做贡献了,这 ...
- Linux软件包的管理
RPM软件包 RPM软件包一般的安装位置(分散): 管理程序:/sbin/* /usr/sbin/* 普通用户程序:/bin/* /usr/bin/* rpm -q ===> rpm -quer ...
- 六)iframe 及父子页面之间获取元素、方法调用
http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...
- Android开发之Tween(补间动画)
在android中动画主要有三种,①帧动画(http://blog.csdn.net/dmk877/article/details/45893017)这篇文章已经详细的进行了讲解,②补间动画这也是这篇 ...
- XJOI 3606 最大子矩形面积/LightOJ 1083 Histogram(单调栈/笛卡尔树)
A histogram is a polygon composed of a sequence of rectangles aligned at a common base line. The rec ...
- 使用Amazon Simple Queue Service(SQS) 实现简单的消息服务
一 引言 亚马逊Amazon作为云计算的领跑者推出了很多云服务,最近因为项目的原因,需要用到SQS服务,因此简要地写下这篇随笔,一来方便以后查阅,二来方便共享一些简单的操作. SQS即可以理解为一个 ...
- [LeetCode 题解]: Remove Nth Node From End of List
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- Linux中VMware虚拟机增加磁盘空间的扩容操作
用VMwareware虚拟机安装的Red Hat Enterprise Linux系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置.通过上网搜集的资料 ...
- httpWebRequest请求错误,基础连接已经关闭: 连接被意外关闭
win10下,C# 用httpWebRequest 执行post请求出现"请求错误,基础连接已经关闭: 连接被意外关闭",经测试设置 //Post请求方式 System.Net.H ...