开始搞自提柜了，与Android配合一起整，还是第一次。
下面是与安卓的交互（从Android获取数据）
// 安卓固定方法
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
);
}
}
connectWebViewJavascriptBridge(function (bridge) {
bridge.init(function (message, responseCallback) {
if (responseCallback) {
responseCallback(data);
}
});
// 自己写的方法
getcode()
})
function getcode(){
window.WebViewJavascriptBridge.callHandler(
'getgoodstype', {
'param': '中文测试'
},
function (responseData) {
// 这是从Android获取到的参数
console.log(responseData)
}
)
}
期间遇到了一个需求，就是页面中有个导航栏，向上滚动到一定位置后要吸顶。
之前没有做过这种的，就在网上找了找。
这是我所看到的原创作者的分享
https://www.cnblogs.com/liyuhuan/p/7779626.html
我直接站出来给大家瞧瞧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js滚动到指定位置导航栏固定顶部</title>
<style type="text/css">
body {
height: 2500px;
margin: 0;
padding: 0;
}
.banner {
height: 250px;
width: 100%;
background: #e5e5e5;
}
.bignav {
width: 100%;
background: #000;
}
.nav {
background: #000;
width: 1200px;
margin: 0 auto;
height: 45px;
}
.nav a {
display: block;
width: 200px;
float: left;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 45px;
}
</style>
</head>
<body>
<div class="banner">
</div>
<div class="bignav" id="bignav">
<div class="nav">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow">首页</a>
</div>
</div>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<script type="text/javascript">
window.onscroll = function () {
var topScroll = get_scrollTop_of_body(); //滚动的距离,距离顶部的距离
var bignav = document.getElementById("bignav"); //获取到导航栏id
if (topScroll > 250) { //当滚动距离大于250px时执行下面的东西
bignav.style.position = 'fixed';
bignav.style.top = '0px';
bignav.style.zIndex = '9999';
} else { //当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
bignav.style.position = 'static';
}
}
/*解决浏览器兼容问题*/
function get_scrollTop_of_body() {
var scrollTop;
if (typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离
scrollTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
} else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
</script>
</body>
</html>
以上js滚动到指定位置导航栏固定顶部的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
