Показать сообщение отдельно
  #70 (permalink)  
Старый 24.06.2020, 23:53
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Здравствуйте. Установил скрипт _http://sticky01.blogspot.com/2013/09/4.html и все работает. Единственное как только начинаешь прокрутку блока в код блока добавляется лишний div со стилями, которые портят вид блока. Помогите избавиться от них.
Вот код блока

<aside id="aside1">
	<span><h5>{blockname}</h5></span>
	<div>
		{blockcont} // это вывод данных блока (Лента новостей)
	</div>
</aside>
<div class="clear"></div>
<style>
.sticky {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
  z-index: 101;
}
</style>

<script>
(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('.blockRows').getBoundingClientRect().top + 30);  // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент;  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>


С начала прокрутки в код после <aside id="aside1"> добавляется

<div style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border-block: 0px none rgb(51, 51, 51); border: 0px none rgb(51, 51, 51); border-radius: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-inline: 0px none rgb(51, 51, 51); border-spacing: 0px; border-start-end-radius: 0px; border-start-start-radius: 0px; box-shadow: none; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: visible; overflow-inline: visible; overflow-wrap: normal; overflow: visible; padding-block: 0px; padding: 0px; padding-inline: 0px; box-sizing: border-box; width: 320px;" class="">

сайт: _http://new.313news.net блок справа Лента новостей

Последний раз редактировалось zulfukar, 24.06.2020 в 23:57.
Ответить с цитированием