Html
    Css
    Js

    
                        
body {
	margin:0;
	padding:20;
	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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

搜索框顶部吸附效果(原创)

2
      Pri_0
      2020/6/18 9:58:47

      你好,我完全复制是无法使用的,我改了一下

      if (window.pageyoffset >= 120) {
        $(".searchtop").fadein(1000);
      }

      用这个判断scroll的距离

          黄河爱浪0
          2020/6/18 10:00:31
          demo有用就是有用,你改了没用就是你改错了。
      回复