京东页面(黏性定位的实现)

心.c

已于 2024-05-12 16:06:31 修改

阅读量767

点赞数 34

文章标签：前端 bootstrap css html

于 2024-05-12 15:54:27 首次发布

本文链接：https://blog.csdn.net/2301_81253185/article/details/138755637

版权

前言:

本文章将分享一些我这周在制作京东页面的实现部分,页面表面大体和京东页面差不多,在里面加了一点script,但是很容易理解,希望大家看到可以有所收获,如果我有哪部分写的不太好,欢迎大家来跟我交流!

🥰个人主页:心.c

🥳文章专题:京东页面制作

🙈欢迎大家点赞❤️收藏💞

京东

关于这个页面,我想分享一下页面中头部的黏性定位,这个定位实现是我自己写的,关于script是本人在AL上搜的,希望可以对大家有帮助,大家有不清楚的地方都欢迎随时来问我.

HTML

下面HTML代码中是视频中关于鼠标滚动时出现的头部搜索区域和头部导航区域,

大致就是当页面高度达到一定位置时,头部的黏性定位就会弹出来,然后加上一些动画(animation),设置时间和位置就可以更加自然的显示出来

<!-- 设置黏性定位区域 -->
    <div class="noface-search" id="stickyElement">
        <div class="wrapper">
            <div class="init-logo"><img src="./images/logo2.png" alt=""></div>
            <div class="init-search">
                <div class="search-box">
                    <input type="text" placeholder="请输入关键字">
                    <div class="photo-btn"><span class="iconfont icon-xiangji"></span></div>
                    <div class="search-btn"><span class="iconfont icon-sousuo"></span></div>
                </div>
                <div class="cart">
                    <i class="iconfont icon-gouwu"></i>
                    <a href="#">我的购物车</a>
                    <div><span>0</span></div>
                </div>

            </div>
        </div>


    </div>

    <!-- 设置黏性导航区域 -->
    <div class="noface-nav" id="stickyElement1">
        <div class="wrapper">
            <div class="content_nav">
                <ul>
                    <li class="active"><a href="#">
                            <div>
                                <h3>精选</h3>
                            </div><span>猜你喜欢</span>
                        </a></li>
                    <div class="thread"></div>
                    <li class="normal"><a href="#">
                            <h3>智能先锋</h3><span>大电器械</span>
                        </a></li>
                    <div class="thread"></div>
                    <li class="normal"><a href="#">
                            <h3>居家优品</h3><span>品质生活</span>
                        </a></li>
                    <div class="thread"></div>
                    <li class="normal"><a href="#">
                            <h3>超市百货</h3><span>百货生鲜</span>
                        </a></li>
                    <div class="thread"></div>
                    <li class="normal"><a href="#">
                            <h3>时尚达人</h3><span>美妆穿搭</span>
                        </a></li>
                    <div class="thread"></div>
                    <li class="normal"><a href="#">
                            <h3>进口好物</h3><span>京东国际</span>
                        </a></li>
                </ul>
            </div>
        </div>
    </div>

CSS

关于顶部导航区域的css样式和下面content导航中的css共用的一个,也因为css样式几乎完全一样就多了个黏性碰撞,没有其他什么变化,所以这里就不展示了;关于下面的css样式,大家可以参考,如果有什么问题可以私信我

.wrapper {
    margin: 0 auto;
    width: 1190px;
}

/* 设置黏性搜索区域 */
.noface-search {
    padding: 0 20px;
    height: 51px;
    background-color: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    /* 距离顶部的距离 */
    border-bottom: 3px solid #e22525;
    z-index: 300;
    /* 确保粘性元素在其他内容上方 */
    display: none;
    /* 初始隐藏 */
    animation: ease1 0.8s ease;
}

.noface-search .init-logo img {
    height: 48px;
    width: 125px;
    background-size: cover;
}

@keyframes ease1 {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0px);
    }
}

.noface-search .wrapper {
    display: flex;


}

.init-search {
    margin-top: 7px;
    padding-left: 150px;
    display: flex;
}

.init-search .search-box {
    position: relative;
    display: flex;
    width: 487px;
    height: 36px;
    border: 2px solid #e53232;
    margin-right: 30px;
}

.init-search .search-box input {
    flex: 1;
    border: 0;
    background-color: transparent;
    outline: none;
    padding-left: 15px;
}

.init-search .search-box input::placeholder {
    font-size: 12px;
    color: #c0c0c0;
}

.init-search .photo-btn .iconfont {
    position: absolute;
    left: 388px;
    top: -8px;
    font-size: 30px;
    color: #c4c4c4;
    cursor: pointer;
}

.init-search search-box {
    position: relative;
    display: flex;
    width: 487px;
    height: 30px;
    border: 2px solid #cb5050;
    margin-right: 20px;
}

.init-search .search-box input {
    flex: 1;
    border: 0;
    background-color: transparent;
    outline: none;
    padding-left: 15px;
}

.init-search .search-box input::placeholder {
    font-size: 12px;
    color: #c0c0c0;
}

.init-search .photo-btn .iconfont {
    position: absolute;
    left: 388px;
    top: -8px;
    font-size: 30px;
    color: #c4c4c4;
    cursor: pointer;
}

.init-search .search-box .search-btn {
    text-align: right;
    right: -58px;
    width: 58px;
    background-color: #cb5050;
    text-align: center;
    cursor: pointer;
}

.init-search .search-btn .iconfont {
    color: #ffffff;
    font-size: 30px;
    line-height: 32px;
}

.init-search .cart {
    position: relative;
    width: 131px;
    height: 36px;
    border: #e9e9e9 1px solid;
    line-height: 32px;
    text-align: center;
}

.init-search .cart .iconfont {
    font-size: 30px;
    color: #cb5050;
    vertical-align: middle;
}

.init-search .cart a {
    font-size: 11px;
    color: #cb5050;
}

.init-search .cart div {
    padding: 1px 5px;
    position: absolute;
    top: 2px;
    left: 33px;
    height: 13px;
    border-radius: 7px;
    background-color: #cb5050;


}

.init-search .cart div span {
    display: block;
    margin-top: -10px;
    color: #fff;
    font-size: 8px;
}

/* 设置黏性导航区域 */
.noface-nav {
    padding: 0 20px;
    height: 61px;
    background-color: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 51px;
    /* 距离顶部的距离 */
    z-index: 233;
    /* 确保粘性元素在其他内容上方 */
    display: none;
    /* 初始隐藏 */
    animation: change 0.7s ease;
}

@keyframes change {
    from {
        transform: translateY(-54px);
    }

    to {
        transform: translateY(0px);
    }
}

script

这个是我自己直接引入修改了高度,如果大家有更加合适的当然可以

    <script>
        window.onscroll = function () { scrollFunction() };

        function scrollFunction() {
            // 当滚动高度大于等于500像素时显示粘性元素，否则隐藏
            if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
                document.getElementById("stickyElement").style.display = "block";
            } else {
                document.getElementById("stickyElement").style.display = "none";
            }
            if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) {
                document.getElementById("stickyElement1").style.display = "block";
            } else {
                document.getElementById("stickyElement1").style.display = "none";
            }

        }
    </script>

到这里我的分享就结束了,如果大家想要了解更多或者想要小编的源码,都可以在评论区里面私信我哦! 欢迎大家和我一起探讨 ! ! !