Фиксированная позиция при прокрутке

223
25 марта 2018, 19:29

В шапке веб-страницы расположены якоря как меню. Шапка при прокрутке веб-страницы вниз получает фиксированную позицию. Если нажать на пункт меню, происходит переход к сноске закрывая заголовок сноски на высоту шапки. Как сделать прокрутку учитывая высоту шапки? 

$(window).scroll(function() { 
      var windowTop = $(window).scrollTop(); 
 
      //check to see if we have scrolled past the original location of the sticky element 
      if (windowTop > stickyTop) { 
 
        //if so, change the sticky element to fised positioning 
        $(".sticky").css({ 
          "position": "fixed", 
          "top": 0 
        }); 
      } else { 
        $(".sticky").css({ 
          "position": "static" 
        }); 
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header class="sticky"></header>

Answer 1

$(document).on('click', ' a[href^="#"]', function (event) { 
    event.preventDefault(); 
    $('html, body').animate({ 
        scrollTop: $($.attr(this, 'href')).offset().top-50/* Вместо 50 можете подставить высоту вашей шапки 
    }, 500); 
});
.block{ 
  height:100vh; 
} 
.header{ 
  position:fixed; 
  top:0; 
  width: 100%; 
  background:#fff; 
  height:50px; 
  border-bottom:1px solid #000; 
  display: flex; 
  align-items:center; 
} 
.header a{ 
  
  margin-right: 20px; 
} 
.blue{ 
  background: blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header"> 
   <a href="#1">Sick of a tension</a> 
   <a href="#2">Sick of a hunger</a> 
</div> 
<div class="block" id="1"> 
  <h1>Sick of a tension</h1> 
</div> 
<div class="block blue" id="2"> 
  <h1>Sick of a hunger</h1> 
</div>

Answer 2

Самое простое что можно сделать: это перед элементом с якорем создать пустой элемент с шириной шапки и перенести якоря на него: например:

было 
<h2 name="yakor1">заголовок 1</h2> 
стало 
<div name="yakor1" style="height="высота шапки"></div> 
<h2>заголовок 1</h2>

Answer 3

Задайте body padding-top = высоте шапки

READ ALSO
Есть ли такой же плагин для Brackets как в notepad?
CSS

Есть ли такой же плагин для Brackets как в notepad?

 179
Js движение блоков
CSS

Js движение блоков

Всем добрый день,только за регистрировался на данном сайте,есть вопрос,в есть вопрос относительно js Есть блок на который при наведении вылезает...

 166
Элементы не сплывают влево (float:left)
CSS

Элементы не сплывают влево (float:left)

Возможно решение здесь очень простое, но я уже много чего попробовал, и толку нетуНужно чтобы список и соц кнопки были в одной строке, пытался...

 248
Анимация сразу после загрузки страницы
CSS

Анимация сразу после загрузки страницы

Есть такая проблема что при загрузке документа все элемент к которым присвоен :hover и transition анимируются сразу после загрузки страницы при...

 193