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"
    });
    })
    }
    })

    })
     
     
  • 相关阅读:
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    SVN分支
    SVN分支
    SVN 版本回退
    SVN 版本回退
    如何在excel中取消合并单元格后内容自动填充?
    如何在excel中取消合并单元格后内容自动填充?
    如何让自己像打王者荣耀一样发了疯、拼了命的学习?
  • 原文地址:https://www.cnblogs.com/zxhh/p/8259187.html
Copyright © 2011-2022 走看看