CSS、jQuery/一个自动定位的悬浮排行（类别）导航栏

最新推荐文章于 2021-09-13 21:15:18 发布

qq_38959715

最新推荐文章于 2021-09-13 21:15:18 发布

阅读量917

点赞数

分类专栏： CSS 文章标签： CSS jQuery 自动定位

本文链接：https://blog.csdn.net/qq_38959715/article/details/90514545

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果一

当拉至效果图二位置以下时，自动定位回效果图一位置

代码部分：

BulletinBoaed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bulletin Board</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link type="text/css" href="css/BulletinBoard.css" rel="stylesheet">
</head>
<body>
    <div class="container" style="height: 2500px; z-index: -1;">
        <div class="container_left_con">
            <div class="left_navigation">

                <div class="left_navigation_con">
                    <div class="left_nav_title">

                        选择类别
                        <a href="" class="left_nav_title_a">更多&gt;</a>

                    </div>
                    <ul class="left_nav_ul">
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span1">1</span>类别一XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span2">2</span>类别二XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span3">3</span>类别三XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">4</span>类别四XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">5</span>类别五XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">6</span>类别六XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">7</span>类别七XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">8</span>类别八XXX</a></li>
                        <li class="left_nav_ul_li"><a href="" class="left_nav_ul_a"><span class="left_nav_ul_span">9</span>类别九XXX</a></li>
                    </ul>
                </div>
            </div>

            <style type="text/css">
                .postFix{
                    left: 20px;
                    top: 20px;
                    position: fixed;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var menuTop = $(".left_navigation").offset().top;
                    $(window).scroll(function(){
                        if($(this).scrollTop() > menuTop+550){
                            $(".left_navigation").addClass("postFix");
                        }else {
                            $(".left_navigation").removeClass("postFix");
                        }
                    })
                })
            </script>

        </div>
    </div>
</body>
</html>

BulletinBoard.css

li{
    list-style: none;
}
a {
    color: #333;
    text-decoration: none;
}

.container_left_con{
    width: 270px;
    margin-left: 10px;
}

.left_navigation{
    width: 270px;
    z-index: 10;
    position: relative;
    transform: translateZ(0px);
    transition: margin-top 0.3s ease;
    will-change: margin-top, top;
    float: left;
}
.left_navigation_con{
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding: 20px;
    background-color: #fcfcfc;
    border:1px solid #ebebeb;
    box-sizing: border-box;
    border-radius: 5px;
}
.left_nav_title{
    width: 100%;
    margin-bottom: 20px;
    padding: 0px 0px;
    color: #333;
    font-size: 20px;
}
.left_nav_title_a{
    width: 50px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-top: 5px;
    margin-left: 10px;
    color: #999;
    background-color: #fff;
    float: right;
    font-size: 12px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;

}
.left_nav_ul{
    width: 100%;
    padding: 0px 0px;
}
.left_nav_ul_li{
    width: 100%;
    margin-bottom: 3.5%;
}
.left_nav_ul_a{
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #333;
    font-size: 15px;
}
.left_nav_ul_span{
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    background-color: #c3c7cc;
    border-radius: 10px;
    float: left;
}
.left_nav_ul_span1, .left_nav_ul_span2,.left_nav_ul_span3{
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    background-color: #e64e4e;
    border-radius: 10px;
    float: left;
}

.left_navigation2{
    width: 270px;
    height: 50px;
    margin-left: 10px;

}
.left_navigation2_a{
    width: 100%;
    height: 150px;
    float: left;
}
.left_navigation2_img{
    width: 100%;
    height: 150px;
    float: left;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    border-radius: 5px;
}
.left_navigation2_span{
    width: 35px;
    height: 20px;
    margin-top: -140px;
    margin-left: 10px;
    color: #333;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    float: left;
}

jquery.min.js 不想下载的直接去这里复制代码 -> https://blog.csdn.net/qq_38959715/article/details/89513843

贴到你自己创建js文件里

qq_38959715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS、jQuery/一个自动定位的悬浮排行（类别）导航栏

效果一当拉至效果图二位置以下时，自动定位回效果图一位置代码部分：BulletinBoaed.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bulletin Board...
复制链接

扫一扫