<!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>