25.06.2016, 01:02
|
Кандидат Javascript-наук
|
|
Регистрация: 27.04.2015
Сообщений: 99
|
|
дел
|
|
16.02.2017, 20:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
EvgenyTryap,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
16.02.2017, 20:54
|
Интересующийся
|
|
Регистрация: 19.09.2014
Сообщений: 19
|
|
Возможно кто-нибудь сможет мне помочь!
Есть фиксированный блок(sidebar) к нижней границе. Мне нужно чтоб как только я прокручу до верхней границы футера(footer), фиксированный блок(sidebar) изменил стиль с position:fixed на position: absolute.
<html>
<head>
<style>
.wrapper{height:1500px;
position:relative;}
.footer{background:#F00;
height:300px;}
.sidebar{
height:50px;
position: fixed;
bottom:0;
left:0;
right:0;
background-color: #FF0000;}
</style>
</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>
|
|
16.02.2017, 21:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
футер сдвигающий блок
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>
|
|
16.02.2017, 21:22
|
Интересующийся
|
|
Регистрация: 19.09.2014
Сообщений: 19
|
|
Огромное спасибо!!это то что нужно!!
|
|
08.03.2017, 18:33
|
Интересующийся
|
|
Регистрация: 19.09.2014
Сообщений: 19
|
|
А возможно ли как-нибудь реализовать тоже самое, но когда у html отключена прокрутка?
<!DOCTYPE html>
<html>
<head>
<style>
html {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: relative;
height: 100%;
overflow: auto;
}
.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>
</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, 08.03.2017 в 18:35.
|
|
08.03.2017, 19:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
EvgenyTryap,
document.body.addEventListener('scroll'
|
|
08.03.2017, 19:15
|
Интересующийся
|
|
Регистрация: 19.09.2014
Сообщений: 19
|
|
Огромнейшее спасибо!!
|
|
23.08.2017, 17:20
|
Аспирант
|
|
Регистрация: 04.06.2017
Сообщений: 46
|
|
Сообщение от рони
|
Navaho,
и наконец фиксация блока на чистом js улучшенный вариант ...
изменение стилей блока происходит только в момент соединения/разьединения блока с футером
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<style type='text/css'>
body{padding:0px;margin:0px}
*{margin:0}
html,body{height:1000px}
.wrapper{min-height:100%;height: auto !important;height:100%;margin:0 auto -170px}
.footer,.push{height:270px}
.footer{background:#F00}
.sidebar{
width:245px;
margin-top:15px;
margin-left:400px;
height:500px;
padding:13px;
font-size:14px;
font-style: italic;
font-family: 'Arial';
border: 2px solid #bab89a;
position: fixed;
background-color: #00FF7F;
}
.sidebar .content .text{
position: absolute;
}
</style>
<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.querySelector(".sidebar"),
b = offset(a),
f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
d = a.offsetHeight + parseInt(f.marginTop) || 0,
e = offset(document.querySelector(".footer"));
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>
</head>
<body>
<div class="sidebar"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
</body>
</html>
|
Добрый день, все таки не могу разобраться в этом примере, как победить при уменьшении окна браузера проблему с поведением сайдбара, не понимаю, как сделать так, что бы при размерах видимой части поведение не менялось?
|
|
23.08.2017, 18:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
JohnJohn,
добавить красное
window.onload = window.resize = function () {
Последний раз редактировалось рони, 23.08.2017 в 19:25.
|
|
|
|