移动端H5页面顶部搜索栏悬浮

前言：在开发过程中，前端页面需要搜索信息，只有头部显示搜索框，想要搜索必须滑到顶部才能搜索。今天专门写个悬浮置顶的H5效果。

1、前端html页面：

<div class="top"><input type="text" name="keys" value=""><div>

2、js代码操作

引用jquery:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

$(function(){//悬浮顶部搜索栏

var headHeight=500;  //滑动高度可自行调节

 

var nav=$(".top");

$(window).scroll(function(){

 

    if($(this).scrollTop()>headHeight){

        nav.addClass("navFix");

    }

    else{

        nav.removeClass("navFix");

    }

});

});

</script>

3、css样式

.navFix{position: fixed;width: 95%;_position: absolute;top: expression((offsetParent.scrollTop)+0);z-index: 2;background-color: #80808040;}