Закрепленное меню и соседний div

176
02 марта 2019, 22:50

Есть закрепленный див (position: fixed;) например высотой 20px, он закрывает начало на 20px обычного следующего блока. Подскажите как можно исправить?

Сейчас беру новый див с 20px. Fixed его перекрывает и выходит норм

Answer 1

В данном случае стоит использовать css свойство position со значением sticky;

position: sticky;
Answer 2

position: sticky; - хорошее быстрое решение, но с поддержкой браузерами у него пока проблемы, поэтому на продакшене лучше пойти через js, тем более, что понадобится 10 строчек ванилы.

var node = document.getElementById('menu_sticky'), 
  nodeOffs = node.offsetTop; 
window.addEventListener('scroll', function() { 
  var scrollPos = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); 
  if (scrollPos > nodeOffs) { 
    node.classList.add('_stickied'); 
  } else { 
    node.classList.remove('_stickied'); 
  } 
});
body { 
  padding: 300px 0 0 0; 
  margin:0; 
  height: 200vh; 
} 
.menu._sticky { 
  height: 50px; 
  width:100%; 
  background-color:red; 
} 
 
.menu._sticky._stickied { 
  position: fixed; 
  top: 0; 
  left: 0; 
}
<nav class="menu _header _sticky" id="menu_sticky"></nav>

READ ALSO
Как перенести приложение с Vue.js на Nuxt.js?

Как перенести приложение с Vue.js на Nuxt.js?

Всем приветЕсть такой код на Vue

166
Ошибка &ldquo;Cannot read property &#39;push&#39; of undefined&rdquo; при добавлении в массив

Ошибка “Cannot read property 'push' of undefined” при добавлении в массив

Пишу небольшую программку для себя, в результате выполнения получаю ошибку

174
JavaScript нейронные сети не хватает памяти

JavaScript нейронные сети не хватает памяти

Написал скрипт, используя библиотеки отсюда

190