Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2018, 18:03
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Прилипающий блок
Здравствуйте. Пытаюсь сделать прилипающий блок при прокрутке вниз, но так, чтобы он при достижении футера оставался у него и дальше не ехал.
Нашел такой вот говнокод( вы сами понимаете почему )
<!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>

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2018, 19:56
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Мда Ответить никто не в силах?
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2018, 22:28
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

Начинающий-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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2018, 22:34
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Спасибо огромное и человеческое!!
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2018, 19:21
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Спасибо и вам
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2018, 05:09
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

ребят, в общем с этим блоком назрела такая проблема-если контент заранее задан-то работает все как надо, но если допустим я создаю дополнительно div через js это блок при прокрутке всегда тупо вниз прилипает и все. Почему так? кто может помочь с этим?
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2018, 13:57
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

<!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(); все становится хорошо, но в консоли часто теперь пишет:
Цитата:
NotFoundError: Node was not found
document.body.removeChild(clone);
Почему возникает и как с этим бороться?
Ответить с цитированием
  #8 (permalink)  
Старый 15.02.2018, 16:12
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Понял. Спасибо вам.
А вот вопрос-если мы не прокручиваем, то значение из текстового поля получить легко. А как получить значение из клонированного текстового поля в клонированной кнопке?
Ответить с цитированием
  #9 (permalink)  
Старый 16.02.2018, 13:07
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Никто не поможет?
Ответить с цитированием
  #10 (permalink)  
Старый 16.02.2018, 13:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Начинающий-Js-кодер,
Читайте пост№8 в этой теме
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прилипающий (скользящий) блок снизу экрана — как прописать условие? yafet Общие вопросы Javascript 11 25.06.2016 11:05
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Jquery Скрыть/Показать блок при наведении tot_kotoryi Ваши сайты и скрипты 1 08.02.2016 23:15
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40