23.08.2017, 19:12
|
|
Аспирант
|
|
Регистрация: 04.06.2017
Сообщений: 46
|
|
|
ничего не изменилось.
|
|
23.08.2017, 19:28
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
JohnJohn,
а так?
window.onscroll = window.resize =
|
|
23.08.2017, 19:31
|
|
Аспирант
|
|
Регистрация: 04.06.2017
Сообщений: 46
|
|
|
пробовал, тоже нет(
|
|
23.08.2017, 19:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
JohnJohn,
можно только гадать в чём у вас проблема?
|
|
23.08.2017, 20:11
|
|
Аспирант
|
|
Регистрация: 04.06.2017
Сообщений: 46
|
|
вот код.
<html>
<head>
<style>
html, body {
height: 100%;
}
.main {
height: 100%;
}
.second_block {
height: 100%;
}
#download_present_img{
position: fixed;
z-index: 9999;
right: 15px;
bottom: 20px;
font-size: 50px;
font-style: normal;
margin-left: 20px;
width: 40px;
height: 40px;
background: red;
}
.footer_block {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: relative;
height: 190px;
bottom: 0;
left: 0;
}
.footer {
color: #ffffff;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 190px;
background: #000;
}
</style>
</head>
<body>
<div class="main"></div>
<div class='second_block'>
<div id="download_present_img"></div>
</div>
<div id="footer_stop" class="footer_block">
<div class="footer">
<div class="text_footer">
<p>footer</p>
</div>
</div>
</div>
<script>
function offset(a) {
for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
return b
}
var s = !0;
window.onload = function () {
var a = document.getElementById("download_present_img"),
b = offset(a),
f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
d = a.offsetHeight + parseInt(f.marginTop) || 0,
e = offset(document.getElementById("footer_stop"));
window.onscroll = window.resize = function () {
var c = window.pageYOffset || document.documentElement.scrollTop,
c = e - (c + d + b);
s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") :
(a.style.top = e - d + "px", a.style.position = "absolute"))
}
};
</script>
</body>
</html>
Последний раз редактировалось JohnJohn, 23.08.2017 в 20:35.
|
|
23.08.2017, 21:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
JohnJohn,
вариант...
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
.main {
height: 100%;
}
.second_block {
height: 100%;
}
#download_present_img{
position: fixed;
z-index: 9999;
right: 15px;
bottom: 20px;
font-size: 50px;
font-style: normal;
margin-left: 20px;
width: 40px;
height: 40px;
background: red;
}
.footer_block {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: relative;
height: 190px;
bottom: 0;
left: 0;
}
.footer {
color: #ffffff;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 190px;
background: #000;
}
</style>
</head>
<body>
<div class="main"></div>
<div class='second_block'>
<div id="download_present_img"></div>
</div>
<div id="footer_stop" class="footer_block">
<div class="footer">
<div class="text_footer">
<p>footer</p>
</div>
</div>
</div>
<script>
function offset(a) {
for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
return b
}
var s = !0;
window.onload = function () {
var a = document.getElementById("download_present_img"),
b = offset(a),
f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
d = a.offsetHeight + parseInt(f.marginTop) || 0,
e = offset(document.getElementById("footer_stop"));
window.onresize = function() {
window.scrollTo(0,0);
s = !0;
a.style.position = "fixed";
a.style.top = "";
b = offset(a);
e = offset(document.getElementById("footer_stop"));
};
window.onscroll = function () {
var c = window.pageYOffset || document.documentElement.scrollTop,
c = e - (c + d + b);
s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") :
(a.style.top = e - d + "px", a.style.position = "absolute"))
}
};
</script>
</body>
</html>
|
|
23.08.2017, 21:20
|
|
Аспирант
|
|
Регистрация: 04.06.2017
Сообщений: 46
|
|
|
Хороший вариант... И как вам это в голову приходит!?! Спасибо.
|
|
16.09.2018, 15:55
|
|
Интересующийся
|
|
Регистрация: 19.09.2014
Сообщений: 19
|
|
Сообщение от рони
|
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>
|
|
Сообщение от рони
|
EvgenyTryap,
document.body.addEventListener('scroll'
|
Подскажите, пожалуйста, а как это реализовать если прокрутка в блоке div (например с id="content") реализована?
|
|
16.09.2018, 16:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
EvgenyTryap,
сделайте минимальный макет, иначе можно только гадать.
|
|
16.09.2018, 16:51
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
content.addEventListener('scroll'
|
|
|
|
