Прилипающий блок
Здравствуйте. Пытаюсь сделать прилипающий блок при прокрутке вниз, но так, чтобы он при достижении футера оставался у него и дальше не ехал.
Нашел такой вот говнокод( вы сами понимаете почему )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Прилипалка(но у футера тормозит)</title>
</head>
<body>
<style>
body {
background: #aba;
}
header, main, footer {
display: block;
max-width: 740px;
margin: 0 auto;
}
header {
margin-bottom: 15px;
font-size: 200%;
background: #456;
text-align: center;
}
header a {
color: #fff;
}
article {
display: block;
float: left;
width: 485px;
height: 1000px;
background: #fff;
}
#aside1 {
display: block;
margin-left: 500px;
box-shadow: 0 0 0 1px #cff inset;
background: #cdc;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
.sticky {
position: fixed;
z-index: 101;
}
.stop {
position: relative;
z-index: 101;
}
</style>
<header>
<a href="http://shpargalkablog.ru/2013/09/scroll-block.html">sticky javascript</a>
</header>
<div style="clear:both;"></div>
<main>
<article id="article"><h1>Блок приклеивается во время прокрутки страницы. Но перед футером останавливается.</h1></article>
<div id="aside1">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20</div>
</main>
<footer><input id="brTest" value="Показать button.getBoundingClientRect() для этой кнопки" onclick="showRect(this)" type="button"></footer>
<script>
function showRect(elem) {
var r = elem.getBoundingClientRect()
alert("{top:"+r.top+", left:"+r.left+", right:"+r.right+", bottom:"+ r.bottom + "}");
}
(function(){
var a = document.querySelector('#aside1'), b = null, P =0; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('footer').getBoundingClientRect().top+0); // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round() только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = -R +'px';
} else {
b.className = 'sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
</script>
</body>
</html>
на этом сайте в задании нашел код, переделываю под свои нужды, но при достижении футера клонированный объект тормозить, а все которые внутри него продолжать ехать дальше. Почему так?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Правильный скролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
background: #aef;
}
.column-right {
margin-left: 30%;
width: 70%;
background: tan;
overflow: auto;
/* расшириться вниз захватить float'ы */
}
.header {
line-height: 60px;
background: yellow;
}
.inner {
margin: 1em;
font-size: 130%;
}
#avatar {
float: left;
margin: 0 1em .5em 0;
border: 1px solid black;
text-align: center;
background: white;
}
img {
display: block;
position: relative;
z-index: 1001;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div class="header">Шапка</div>
<div class="column-left">
<div class="inner">
<h3>Персонажи:</h3>
<ul>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Сова</li>
<li>Кролик</li>
</ul>
</div>
</div>
<div class="column-right">
<div class="inner">
<h3>Винни-Пух</h3>
<div id="avatar">
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
надпись.
</p>
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
в 1954; между этими датами — ряд трагических событий германской истории.</p>
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
</div>
</div>
<footer id="foot"></footer>
<script>
var b;
var avatar = document.querySelector("#avatar");
var coords = avatar.getBoundingClientRect();
var clone = avatar.cloneNode(true);
clone.className = "fixed";
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top-coords.height) {
document.body.appendChild(clone);
} else {
if (_scroll>=foot.top-coords.height) {
alert("prilip");
}
if(document.querySelector(".fixed")) {
clone.style.bottom ='1541px';//почему то только он. а внутренние элементы нет
document.body.removeChild(clone);
}
}
}
</script>
</body>
</html>
Спасибо |
Мда Ответить никто не в силах?
|
Начинающий-Js-кодер,
может как-нибудь так?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Правильный скролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
background: #aef;
}
.column-right {
margin-left: 30%;
width: 70%;
background: tan;
overflow: auto;
/* расшириться вниз захватить float'ы */
}
.header {
line-height: 60px;
background: yellow;
}
.inner {
margin: 1em;
font-size: 130%;
}
#avatar {
float: left;
margin: 0 1em .5em 0;
border: 1px solid black;
text-align: center;
background: white;
}
img {
display: block;
position: relative;
z-index: 1001;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div class="header">Шапка</div>
<div class="column-left">
<div class="inner">
<h3>Персонажи:</h3>
<ul>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Сова</li>
<li>Кролик</li>
</ul>
</div>
</div>
<div class="column-right">
<div class="inner">
<h3>Винни-Пух</h3>
<div id="avatar">
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
надпись.
</p>
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
в 1954; между этими датами — ряд трагических событий германской истории.</p>
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
</div>
</div>
<footer id="foot"></footer>
<script>
var b;
var avatar = document.querySelector("#avatar");
var clone = avatar.cloneNode(true);
clone.className = "fixed";
var coords = avatar.getBoundingClientRect();
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top) {
document.body.appendChild(clone);
} else {
document.body.removeChild(clone);
}
if (_scroll>foot.top-coords.height){
clone.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
</script>
</body>
</html>
|
Спасибо огромное и человеческое!!
|
Спасибо и вам
|
ребят, в общем с этим блоком назрела такая проблема-если контент заранее задан-то работает все как надо, но если допустим я создаю дополнительно div через js это блок при прокрутке всегда тупо вниз прилипает и все. Почему так? кто может помочь с этим?
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Cкролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
background: #aef;
}
.column-right {
margin-left: 30%;
width: 70%;
background: tan;
overflow: auto;
/* расшириться вниз захватить float'ы */
}
.header {
line-height: 60px;
background: yellow;
}
.inner {
margin: 1em;
font-size: 130%;
}
#avatar {
float: left;
margin: 0 1em .5em 0;
border: 1px solid black;
text-align: center;
background: white;
}
img {
display: block;
position: relative;
z-index: 1001;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
width: 100%;
background: yellow;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div id="s_bl">
<input type="text" size="80" id="first" class="text_input">
<input type="submit" value="Добавить элемент" onclick="add();" id="bdf">
</div>
<div id="result">
</div>
<footer id="foot"></footer>
<script>
var avatar = document.querySelector("#s_bl");//что подхватываем
var clone = avatar.cloneNode(true);
clone.className = "fixed";
var coords = avatar.getBoundingClientRect();
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top) {
document.body.appendChild(clone);
} else {
document.body.removeChild(clone);
}
if (_scroll>foot.top-coords.height){
clone.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
function add(){
var div = document.createElement('div');
div.innerHTML = '<br>Новый элемент</a><br>';
document.getElementById("result").appendChild(div);
}
</script>
</body>
</html>
Вот код. Если вставляю в функцию add() в конец- foot = document.querySelector("#foot").getBoundingClientR ect(); все становится хорошо, но в консоли часто теперь пишет: Цитата:
|
Понял. Спасибо вам.
А вот вопрос-если мы не прокручиваем, то значение из текстового поля получить легко. А как получить значение из клонированного текстового поля в клонированной кнопке? |
Никто не поможет?
|
Начинающий-Js-кодер,
Читайте пост№8 в этой теме |
Dilettante_Pro,
читайте пост номер 9 рони, объясняю-при нажатии кнопки в не клонированном элементе я получаю данные из строки следующим образом- document.getElementById("имя оригинального инпута").value, но в клонированном элементе как мне при нажатии кнопки получить значение только уже из клонированной строки? |
Вот ваш пример из пост№9 в работающем виде с небольшим изменением
(строка 103) Вы это имеете в виду?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Cкролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
background: #aef;
}
.column-right {
margin-left: 30%;
width: 70%;
background: tan;
overflow: auto;
/* расшириться вниз захватить float'ы */
}
.header {
line-height: 60px;
background: yellow;
}
.inner {
margin: 1em;
font-size: 130%;
}
#avatar {
float: left;
margin: 0 1em .5em 0;
border: 1px solid black;
text-align: center;
background: white;
}
img {
display: block;
position: relative;
z-index: 1001;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
width: 100%;
background: yellow;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div id="s_bl">
<input type="text" size="80" id="first" class="text_input">
<input type="submit" value="Добавить элемент" onclick="add();" id="bdf">
</div>
<div id="result">
</div>
<footer id="foot"></footer>
<script>
var avatar = document.querySelector("#s_bl");//что подхватываем
var clone = avatar.cloneNode(true);
clone.className = "fixed";
var coords = avatar.getBoundingClientRect();
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top) {
document.body.appendChild(clone);
} else if(clone.parentNode){
document.body.removeChild(clone);
}
if (_scroll>foot.top-coords.height){
clone.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
function add(){
var div = document.createElement('div');
// div.innerHTML = '<br>Новый элемент</a><br>';
div.innerHTML = document.getElementById("first").value;
document.getElementById("result").appendChild(div);
}
</script>
</body>
</html>
Действительно, значение берется из оригинального инпута - клонированный инпут с таким же id игнорируется |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Cкролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
width: 100%;
background: yellow;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div id="s_bl">
<input type="text" size="80" id="first" class="text_input">
<input type="submit" value="Добавить элемент" onclick="add();" id="bdf">
</div>
<div id="result">
</div>
<footer id="foot"></footer>
<script>
var avatar = document.querySelector("#s_bl");//что подхватываем
var coords = avatar.getBoundingClientRect();
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top) {
avatar.className = "fixed";
} else {
avatar.className = "";
}
if (_scroll>foot.top-coords.height){
avatar.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
function add(){
var div = document.createElement('div');
// div.innerHTML = '<br>Новый элемент</a><br>';
div.innerHTML = document.getElementById("first").value;
document.getElementById("result").appendChild(div);
}
</script>
</body>
</html>
|
Я правильно вас понял, что вы избавились от клонирования. а теперь блок ездит и фиксируется, да?
Возникла такая проблема-код
window.addEventListener("DOMContentLoaded", function() {
//тут код, объявление переменных
document.addEventListener("scroll", function(e) {
//тут еще код
});
});
если я его ставлю в нижнюю часть html страницы прилипание работает, а если выношу весь этот код в отдельный js файл и подключаю в заголовках-то работать перестает и скрипт не выполняет прилипания блока. Думал может это связанно с document.addEventListener? Не подскажете как этот код сделать так, чтобы работал в отдельном файле и чтобы не загружать html страницу.Спасибо |
рони,
отдохни и не набивай себе пустых сообщений. Не понял-значит не твое. |
не флуди
|
Я максимально доступно ведь объяснил, почему это непонятно?
|
Начинающий-Js-кодер,
не могу вам помочь, не буду вам мешать, удалил свои сообщения. |
Начинающий-Js-кодер,
Пропало желание вам помогать |
Отчего так, милейший?
|
рони,
зря. |
Ребят, мне никто не поможет?
|
Цитата:
|
А при чем тут это?
Прилипающий блок не работает при динамическом изменении. Я уже все перепробовал. в чем причина может быть? |
Цитата:
Цитата:
Цитата:
|
Manyasha, просто не знаешь как?
|
Мда. А собственно вы чего такие злые? Не смогли задачу решить и обозлились сразу, да?
|
| Часовой пояс GMT +3, время: 08:12. |