使用jQuery + CSS 实现固定在底部的漂浮导航条
使用jQuery + CSS 实现固定在底部的漂浮导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 禁止页面缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
<title>jQuery+CSS+DIV固定底部的漂浮导航条</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
jQuery(function () {
/*
1.概述：绑定一个或多个事件的event handler function到选中的元素上。
2.参数：.on( events [, selector] [, data], handler(eventObject) )
event：一个或多个空格分隔的事件类型和可选的命名空间，如“click”或“keydown.myPlugin”。
selector：过滤那些触发事件的被选中元素的后代元素（selector匹配的后代元素才能触发）。如果选择器是null或者被省略，则选中元素总能触发事件。
data：当事件被触发时，data通过event.data传递给事件处理函数。
handler(eventObject)：事件被触发时用来处理的函数。
*/
$(window).on('scroll', function () {
if ($(window).scrollTop() > 50) {
$('#bottomNav').show();
} else if ($(window).scrollTop() < 1) {
$('#bottomNav').hide();
}
});
})
</script>
<style type="text/css">
.bottomNav {
position: fixed; /*绝对定位*/
bottom: 0; /*屏幕左下角*/
left: 0;
width: 100%;
height: 44px;
background-color: gray;
opacity: 0.8; /*透明度 80%*/
z-index: 999; /**/
overflow: visible;
display: none;
}
#weixinUrl {
color: white;
text-decoration: none; /* 规定添加到文本的修饰 */
border-style: solid;
border-color: white;
border-width: 0.1em;
position: absolute;
right: 12px;
top: 12px;
}
</style>
</head>
<body>
<div>
<p>网页内容</p>
</div>
<div id="bottomNav" class="bottomNav">
<a id="weixinUrl" href="#">导航按钮</a>
</div>
</body>
</html>
转载于:https://my.oschina.net/CasparLi/blog/359662
参考 https://blog.csdn.net/weixin_33817333/article/details/91929660?ops_request_misc=&request_id=