zoukankan      html  css  js  c++  java
  • 关于锚点定位,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="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="images/wd.png"></div>
    <p>
    内蒙古歌舞团(原内蒙文工团)成立于1946年4月,由蒙、汉、满、回、达斡尔、鄂温克、朝鲜等十几个民族的280余名演职员组成。

    </p>
    <p>
    歌舞团现有主要艺术家:道尔吉(一级品笛子独奏《鄂尔多斯的春天》、《走西口》)、金花(一级演员,代表作品歌曲《乳香飘》、《黑缎子坎肩》)、千亚丽(一级演员,代表作品《多彩的节奏》)等。
    </p>
    <div class="activity_show_img">
    <img src="images/dauce_03.png">
    </div>
    </div>
    <div>
    <a href="javascript " id="activity_say"></a>
    <div class="h_title"><h3>活动声明</h3><img src="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="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="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;
    866px;
    background: #fff;
    }
    .culture_activity_left>div{
    margin-top: 30px;
    position: relative;
    border:1px solid #000;
    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"
    });
    })
    }
    })

    })
     
     
  • 相关阅读:
    美女检测器
    汉字动画程序的原理
    值类型不是值类型(ValueType is NOT a Value Type):闲谈.Net类型
    PowerShell 简介
    Visual Studio 2012 RC 发布
    使用 MvcMiniProfiler 监控EF 4.1 with MySQL Provider
    NuGet安装及简单使用
    发布自己的NuGet程序
    Qizmt 单机及分布式部署注意事项
    JDynamic :支持Json反序列化为Dynamic对象
  • 原文地址:https://www.cnblogs.com/zxhh/p/8259187.html
Copyright © 2011-2022 走看看