例如:

问题:

刚开始的时候 。ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed;那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分。

解决办法:

给div里边加了一个a,判断当滚动条滚动到一个程度就 给ul为 position:fixed,a标签就设置绝对定位向下移动比 ul高度有一点的 距离就可以了。

html:

<div class="culture_activity_left left">

  1. <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余名演职员组成。
  2. </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>
  3. css:
  1. .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
  1. $(document).ready(function () {
    //ul li选中状态
  1. $(".site_lis li").click(function () {
    $(this).addClass("now_page").siblings().removeClass("now_page");
    });
    $(window).scroll(function () {
  2.  
  3. 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"
    });
    })
    }
    })
  1. })
  1.  
  1.  

关于锚点定位,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. Go 面向对象概念

    前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...

  2. Selenium模拟浏览器初识

    Seleniumd介绍 在写Python爬虫的时候,最麻烦的不是那些海量的静态网站,而是那些通过JavaScript获取数据的站点.Python本身对js的支持不好,所以就有良心的开发者来做贡献了,这 ...

  3. Linux软件包的管理

    RPM软件包 RPM软件包一般的安装位置(分散): 管理程序:/sbin/* /usr/sbin/* 普通用户程序:/bin/* /usr/bin/* rpm -q ===> rpm -quer ...

  4. 六)iframe 及父子页面之间获取元素、方法调用

    http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...

  5. Android开发之Tween(补间动画)

    在android中动画主要有三种,①帧动画(http://blog.csdn.net/dmk877/article/details/45893017)这篇文章已经详细的进行了讲解,②补间动画这也是这篇 ...

  6. XJOI 3606 最大子矩形面积/LightOJ 1083 Histogram(单调栈/笛卡尔树)

    A histogram is a polygon composed of a sequence of rectangles aligned at a common base line. The rec ...

  7. 使用Amazon Simple Queue Service(SQS) 实现简单的消息服务

    一  引言 亚马逊Amazon作为云计算的领跑者推出了很多云服务,最近因为项目的原因,需要用到SQS服务,因此简要地写下这篇随笔,一来方便以后查阅,二来方便共享一些简单的操作. SQS即可以理解为一个 ...

  8. [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 ...

  9. Linux中VMware虚拟机增加磁盘空间的扩容操作

    用VMwareware虚拟机安装的Red Hat Enterprise Linux系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置.通过上网搜集的资料 ...

  10. httpWebRequest请求错误,基础连接已经关闭: 连接被意外关闭

    win10下,C# 用httpWebRequest 执行post请求出现"请求错误,基础连接已经关闭: 连接被意外关闭",经测试设置 //Post请求方式 System.Net.H ...