javascript 元素滚动到顶部固定效果(搜索框在顶部悬停)

雨点打透心脏的1/2处 2021-12-24 10:27 502阅读 0赞

除了搜索框，或者导航栏等类型特效都可以采用相同的方式解决。无疑像效果图所演示的效果相对于固定导航栏来说要更难一些。有其它效果需要更改，请自行修改下方源码。

### 在线演示地址：[https://www.jq22.com/webqd6165][https_www.jq22.com_webqd6165] ###

### 效果图： ###

![20190625165626128.gif][]

### 源码： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动切换搜索框</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                font-size: 14px;
            }
            .box-1{
                height: 200px;
                background-color: #09BB07;
                position: relative;
            }
            .box-1 .search{
                height: 40px;
                width: 80%;
                border-radius: 20px;
                border: none;
                background-color: #fff;
                position: absolute;
                left: 10%;
                bottom: -20px;
                box-shadow: 0 0 5px #999;
                z-index: 5;
                transition:all 0.5s ease-in-out	0s;
                top: auto;
                padding: 0 10px;
                box-sizing: border-box;
                outline:none;
            }
            .box-1 .search.fixed{
                height: 30px;
                width: 70%;
                border-radius: 15px;
                border: none;
                background-color: #eee;
                position: fixed;
                left: 20%;
                top: 5px;
                box-shadow: none;
                bottom: auto;
            }
            .box-top{
                height: 40px;
                position: fixed;
                width: 100%;
                left: 0;
                top: 0;
                background-color: rgba(255,255,255,0);
                z-index: 1;
                transition:all 0.5s ease-in-out	0s;
            }
            .box-top.active{
                background-color: rgba(255,255,255,1);
            }
        </style>
    </head>
    <body>
        <div class="box-top" id="top"></div>
        <div class="box-1">
            <input type="text" class="search" id="search" placeholder="请输入搜索内容" autocomplete="off">
        </div>
        <div style="height: 1000px;background-color: #f3f3f3;">
            <div style="text-align: center;color: #999;padding-top: 100px;">
                <div>helang.love@qq.com</div>
                <div>© 2019</div>
            </div>
        </div>
        <script type="text/javascript">
            var el_top=document.querySelector("#top"),el_search=document.querySelector("#search");
            var height=el_search.offsetTop,flag=true;
    
            document.addEventListener("scroll",function () {
                if(document.documentElement.scrollTop>=height){
                    if(flag){
                        flag=false;
                        el_top.classList.add("active");
                        el_search.classList.add("fixed");
                    }
                }else {
                    if(!flag){
                        flag=true;
                        el_top.classList.remove("active");
                        el_search.classList.remove("fixed");
                    }
                }
            },false);
        </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[https_www.jq22.com_webqd6165]: https://www.jq22.com/webqd6165
[20190625165626128.gif]: /images/20211224/cdcb3a7978d341b4b6a9ae4edabe83ad.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211224/e0ca5ca3030a42c3aa587825f8887ff1.png