Фиксация левой (правой) колонки при прокрутке страницы

[Bracula]

Фиксация левой (правой) колонки при прокрутке страницы, и прилипание к футеру. 
Если делать путем css
.#column-left {
position: fixed;
}
Колонка просто игнорирует наличие остального контента.

Пробовал через js
 

<script type="text/javascript"><!--
$(document).ready(function($) {
$nav = $('#column-left');
$nav.css('width', $nav.outerWidth());
$window = $(window);
$h = $nav.offset().top;
$window.scroll(function() {
if ($window.scrollTop() > $h) {
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
});
});
--></script>
css
.fixed {
position: fixed;
top: 0;
}

Получается примерно то же самое, только фиксация не сразу начинается.
Как сделать чтобы колонка не игнорировала остальной контент? и прилипала к футеру?

[HyperLabTeam]

что значит фиксация и прилипание к футеру?
пример есть?

[destreser]

https://abouolia.github.io/sticky-sidebar/

[krluch]

55 минут назад, Bracula сказал:

Как сделать чтобы колонка не игнорировала остальной контент? и прилипала к футеру?

Попробуйте сделать по этому рецепту - http://shpargalkablog.ru/2013/09/scroll-block.html, у меня нормально сработало

[SooR]

#column-left {
  position: sticky;
  top: 0;
}

https://alligator.io/css/position-sticky/

[Bracula]

1 час назад, krluch сказал:

Попробуйте сделать по этому рецепту - http://shpargalkablog.ru/2013/09/scroll-block.html, у меня нормально сработало

Спасибо, видел этот пример. Но почему то не подключился, что то видимо не то делаю. 

[TeslaFeo]

Решается простеньким скриптом:

window.addEventListener('scroll', function(){
  // Получаем высоту элементов
  var left_column_height = left_column.offsetHeight;
  var left_column_content_height = left_column_content.offsetHeight;
  
  // Вычисляем максимально допустимое смещение
  var maxTranslate = left_column_height - left_column_content_height;
  
  // Получаем текущее значение прокрутки
  var scrolled = document.documentElement.scrollTop;
  
  // Вычисляем окончательное значение смещения
  var translate = (scrolled > maxTranslate) ? maxTranslate : scrolled;
  
  // Смещаем элемент
  left_column_content.style.transform = 'translateY(' + translate + 'px)';
});

Живой пример

 

[TeslaFeo]

Можно еще красивее :)

[Bracula]

В 15.02.2019 в 12:10, krluch сказал:

Попробуйте сделать по этому рецепту - http://shpargalkablog.ru/2013/09/scroll-block.html, у меня нормально сработало

D В итоге так и сделал: сам скрипт вставлял в common.js

// 	left-right-content sticky function	
Array.prototype.slice.call(document.querySelectorAll('#column-left, #column-right')).forEach(function(a) {
var b = null, P = 50;
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('#content').getBoundingClientRect().bottom -20);
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
      b.style.left = 0;
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
      b.style.left = Ra.left + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
    b.style.left = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width;
    b.style.left = (b.className == 'sticky' ? (a.getBoundingClientRect().left + 'px') : '0');
  }, false);
}
})

 

Змінено 18 лютого 2019 користувачем Bracula

[Bracula]

В 18.02.2019 в 15:40, Bracula сказал:

D В итоге так и сделал: сам скрипт вставлял в common.js

// 	left-right-content sticky function	
Array.prototype.slice.call(document.querySelectorAll('#column-left, #column-right')).forEach(function(a) {
var b = null, P = 50;
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('#content').getBoundingClientRect().bottom -20);
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
      b.style.left = 0;
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
      b.style.left = Ra.left + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
    b.style.left = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width;
    b.style.left = (b.className == 'sticky' ? (a.getBoundingClientRect().left + 'px') : '0');
  }, false);
}
})

А вот теперь как оказалось есть необходимость отключить этот скрипт на мобильной версии сайта. К;ак это сделать

пробовал через 

if(window.width < 768) {
   return;
} else {
 function script()
}

не получилось, он все равно работает.