类楼层效果

前端_开发人
485 阅读10分钟

公司要写一个类似楼层的效果，在点击tab的时候，对应的tab项高亮，并且在滚动到相应位置的时候对应的tab也是高亮的，加上顶部固定，简单实现，代码如下。

$(function () {
    //为页面添加页面滚动监听事件
    var a1=$("#a1").offset().top;
    var a2=$("#a2").offset().top;
    var a3=$("#a3").offset().top;
    var oheight=$(window).height();
    $(window).scroll(function () {
        var wst = $(window).scrollTop()+oheight-99;
        var wst2 = $(window).scrollTop();
        if(wst>a3){
            $('.need a').removeClass("red");
            $(".a33").addClass("red");      
        }
        if(a3>=wst&&wst>a2){
            $('.need a').removeClass("red");
            $(".a22").addClass("red");   
        }
        if(a2>=wst&&wst>a1){
            $('.need a').removeClass("red");
            $(".a11").addClass("red");   
        }
        if (wst2 >= 142) {
            $(".show").css({
                display:"flex"
            });
        } else {
            $(".show").css({
                display:"none"
            });
        }
    });
    $('.tab p').click(function(){
        if($(this).index()==0){
            window.scrollTo(0,a1-oheight+100);
        }else if($(this).index()==1){
            window.scrollTo(0,a2-oheight+100);
        }else if($(this).index()==2){
            window.scrollTo(0,a3-oheight+100);
        }
    });
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目详情</title>
    <script src="js/reset.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="js/projectDetail.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/projectDetail.css" />

</head>

<body>
    <div class="pro_detail">
        <div class="pro_top">
            <img src="img/项目图片68x68.png" alt="">
            <div class="pro_r">
                <p class="black">拜腾汽车拜腾汽车拜腾汽车拜腾汽车拜腾汽车拜腾汽车拜腾汽车拜腾</p>
                <p class="gray">个人项目</p>
                <p class="gray"><span>杭州市</span><span>|</span><span>NO.23342223342223342222</span></p>
            </div>

        </div>
        <div class="bottom_line"></div>
        <div class="need">
            <div class="tab black">
                <p><a class="a11"  class="red">项目介绍</a></p>
                <p><a class="a22" >融资历史</a></p>
                <p><a class="a33" >相关信息</a></p>
            </div>
            <div class="tab black show">
                <p><a class="a11"  class="red">项目介绍</a></p>
                <p><a class="a22" >融资历史</a></p>
                <p><a class="a33" >相关信息</a></p>
            </div>
            <div class="need_c">
                <p></p>
                <span>融资需求</span>
            </div>
            <div class="round">
                <span class="gray">C轮</span>
                <span class="red">100-2000万人民币</span>
            </div>
        </div>
        <div class="bottom_line"></div>
        <div class="pro_zs">
            <div class="need_c">
                <p></p>
                <span>项目指数</span>
            </div>
            <div class="need_c_tab red">
                <div>
                    <p class>250</p>
                    <p class="bla">收藏量</p>
                </div>
                <div>
                    <p>87</p>
                    <p class="bla">反馈数</p>
                </div>
                <div>
                    <p>50个</p>
                    <p class="bla">约谈数</p>
                </div>
                <div>
                    <p>20</p>
                    <p class="bla">当前热度</p>
                </div>
            </div>
        </div>
        <div class="bottom_line"></div>
        <div class="content">
            <div class="need_c black" id="a1">
                <p></p>
                <span>项目介绍</span>
            </div>
            <div class="cont_title">
                <p>南京知行新能源汽车技术开发有限公司</p>
                <p>维度投资因其杰出的投资业绩和悠久
                    </p>
            </div>
        </div>
        <div class="bottom_line"></div>
        <div class="history">
            <div class="need_c" id="a2">
                <p></p>
                <span>融资历史</span>
            </div>
            <ul>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
                <li>
                    <div class="ned_l">
                        <p><span>轮次</span><span>A轮</span></p>
                        <p><span>金额</span><span>5亿美元</span></p>
                        <p><span>估值</span><span>200亿美元</span></p>
                        <p><span>投资方</span><span>一汽集团</span></p>
                    </div>
                    <div class="ned_r">2018-06</div>
                </li>
            </ul>
        </div>
        <div class="info">
            <div class="need_c" id="a3">
                <p></p>
                <span>相关信息</span>
            </div>
            <!-- <div class="img">
                <img src="img/项目图片200356.png" alt="">
                <img src="img/项目图片200356.png" alt="">
                <img src="img/项目图片200356.png" alt="">
            </div> -->
        </div>
        <div class="bottom_line"></div>
        <div class="relation">
            <div class="case_l">
                    <div class="need_c">
                        <p></p>
                        <span>相关竞品</span>
                    </div>
                    <p class="right">
                        <span>查看更多</span>
                        <img src="img/形状2拷贝2.png" alt="">
                    </p>
                </div>
            <!-- <ul>
                <li>
                    <img src="img/140x140图像.png" alt="">
                    <div>
                        <p class="bla"><span>项目名称</span><span>天使轮</span></p>
                        <p class="gray"><span>个人</span><span>股权融资</span><span>互联网行业</span></p>
                        <p class="bla xs"><span>融资金额：</span><span class="bla">100-1000万/人民币</span></p>
                    </div>
                    <p class="position">
                        <img src="img/定位icon.png" alt="">
                        <span>上海</span>
                    </p>
                </li>
                <li>
                    <img src="img/140x140图像.png" alt="">
                    <div>
                        <p class="bla"><span>项目名称</span><span>天使轮</span></p>
                        <p class="gray"><span>个人</span><span>股权融资</span><span>互联网行业</span></p>
                        <p class="bla xs"><span>融资金额：</span><span class="bla">100-1000万/人民币</span></p>
                    </div>
                    <p class="position">
                        <img src="img/定位icon.png" alt="">
                        <span>上海</span>
                    </p>
                </li>
                <li>
                    <img src="img/140x140图像.png" alt="">
                    <div>
                        <p class="bla"><span>项目名称</span><span>天使轮</span></p>
                        <p class="gray"><span>个人</span><span>股权融资</span><span>互联网行业</span></p>
                        <p class="bla xs"><span>融资金额：</span><span class="bla">100-1000万/人民币</span></p>
                    </div>
                    <p class="position">
                        <img src="img/定位icon.png" alt="">
                        <span>上海</span>
                    </p>
                </li>
            </ul> -->
        </div>
        <div class="bottom">
            <p>
                <img src="img/收藏icon.png" alt="">
                <span>收藏</span>
            </p>
            <p>
                <img src="img/图层10.png" alt="">
                <span>投资顾问</span>
            </p>
            <p>
                <img src="img/图层11.png" alt="">
                <span>一键约谈</span>
            </p>
            <div class="button">
                申请查看BP
            </div>
        </div>
    </div>
</body>
<script>

</script>

</html>

.people {
    overflow-x: hidden;
    padding-bottom:.6rem;
}

.people .people_t {

    height: 1.36rem;
    overflow: hidden;
    padding: .3rem .15rem 0 .15rem;
    box-sizing: border-box;
    font-size: .14rem;
}

.people .people_t .img {
    float: left;
    overflow: hidden;
    width: .62rem;
    height: .62rem;
    margin-right: .15rem;
}
.ph{
    padding:0.3rem 0.15rem;
}
.p_l {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 2.6rem;
}
.biaoqian{
    overflow: hidden;
    margin-top:.15rem;
    line-height: .24rem;
}
.biaoqian p:nth-of-type(2) span{
    margin-right:.1rem;
    color:#666;
    font-size:.14rem;
}
.area p:nth-of-type(2) span{
    color: #F72C4A;
    line-height: .24rem;
}
.biaoqian p:nth-of-type(2){
    width:2.5rem;
    float: left;
    margin-left:.13rem;
}
.biaoqian p:nth-of-type(1){
	font-size: .14rem;
    padding: 0.02rem 0.06rem 0 0.06rem;;
    background: rgba(247, 44, 74, .1);
    color: #F72C4A;
    /* margin-left: .06rem; */
    float: left;                                       
    border-radius: 0.05rem;
}
.people .people_t .img .img_l {
    width: 100%;
    height: 100%;
}

.people .people_t .people_r {
    height: 100%;
    float: left;
}

.people .people_t .p_r {
    margin-top: .15rem;
}

.people .people_t .people_r .title {
    overflow: hidden;
    margin-bottom: .15rem;
    font-size: .18rem
}

.people .people_t .people_r .title span {
    float: left;
}

.people .people_t .people_r .title img {
    float: left;
    width: .18rem;
    height: .18rem;
    margin-left: .10rem;
}

.people .people_t .people_r .p_r img {
    display: inline-block;
    height: .14rem;
    width:.11rem;
}

.people .people_t .people_r .p_r span {
    font-size: .14reml
}

.favort {
    padding: 0.3rem 0.15rem;
}

.favort .fa_c {
    display: flex;
    justify-content: space-between;
    margin-top: .15rem;

}

.favort .fa_c p {
    text-align: center;
    font-size: .14rem;
}

.favort .fa_c p:nth-of-type(2) {
    margin-top: .1rem;
    color: #333;
}

.intro {
    padding: .3rem .15rem;
}

.intro .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    font-size: .14rem;
    line-height: .24rem;
    margin-top: .1rem
}

.case {

    padding: 0.3rem 0.15rem 0 0.15rem;
}



.case ul li {
    overflow: hidden;
    height: 1.10rem;
    border-bottom: .01rem solid #E1E1E1;
    padding: .3rem .15rem 0 0.15rem;
}

.case ul li img {
    float: left;
    width: .5rem;
    height: .5rem;
    margin-right: .1rem;
}

.case ul li .li_t {
    float: left;
}

.case ul li .li_t p:nth-of-type(2) {
    font-size: .14rem;
}

.case ul li .li_t p:nth-of-type(1) {
    overflow: hidden;
    margin-bottom: .15rem;
}

.case ul li .li_t p:nth-of-type(1) span:nth-of-type(1) {
    color: #333333;
    font-size: .16rem;
    float: left;

}

.case ul li .li_r {
    float: right;

}

.case ul li .li_r p:nth-of-type(1) {
    color: #CCCCCC;
    font-size: .14rem;
    margin-bottom: .15rem;
}

.case ul li .li_r p:nth-of-type(2) img {
    height: 0.14rem;
    width: auto;
    line-height: 0.24rem;
    /* margin-top: .02rem; */

}

.case ul li .li_r p:nth-of-type(2) span {
    font-size: .14rem;
    color: #666666;
    line-height: .14rem;
}
.bottom{
    width: 3.75rem;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    /* height: .7rem; */
}
.bottom p{
float: left;
text-align: center;
width:.5rem;
margin:0 .05rem 0 .15rem;
font-size: .12rem;
padding-top:.07rem;
margin-bottom:.05rem;
box-sizing: border-box;
color: #999999;
}
.bottom p img{
    width:.24rem;
    height:.24rem;
    display: block;
    margin:0 auto;

}
.button{
    float: right;
    width:1.4rem;
    height:.39rem;
    background: #F72C4A;
    text-align: center;
    line-height: .39rem;
    margin-right:.1rem;
    color:#fff;
    margin-top:.05rem;
    border-radius: .2rem;
    font-size: .16rem;
}
avatar
文章
阅读
粉丝