EvgenyTryap,
при условии DOCTYPE ...
<!DOCTYPE html>
<html>
<head>
<style>
html *{
margin:0;
padding:0;
}
.wrapper{
height:1500px;
position:relative;
}
.footer{
background:#F00;
height:300px;
border-top: rgb(255, 255, 0) 1px dashed;
}
.sidebar{
height:50px;
position:fixed;
bottom:0;
left:0;
right:0;
background-color:#FF0000;
}
.sidebar.move{
position:absolute;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var footer = document.querySelector('.footer'),
sidebar = document.querySelector('.sidebar'),
top, height;
document.addEventListener('scroll', function() {
top = footer.getBoundingClientRect().top;
height = document.documentElement.clientHeight;
sidebar.classList[top < height ? "add" : "remove"]('move');
});
});
</script>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="sidebar">fixed block</div>
</div>
<div class="footer">
<p>footer text</p>
</div>
</body>
</html>
|