Прикрепить элемент к стенке браузера

194

07 февраля 2020, 06:00

Необходимо прикрепить элемент к стенке браузера, чтобы тот взаимодействовал(шапка спускалась) вместе с прокруткой страницы вниз. НО, при этом над шапкой должен быть просвет

Answer 1

position: fixed;
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Источник : position | htmlbook.ru

Пример:

body { 
  background: url('https://i.pinimg.com/236x/01/03/7a/01037ae9bfa0d51b881bcd01cdf92a2b--desktop-backgrounds-repeat.jpg') repeat left top / 50px; 
  height: 200vh; 
} 
 
.fixed { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: red; 
  position: fixed; 
  left: 0; top: 50px; right: 0; 
}

<div class="fixed"></div>

UPD Кажется я понял как должно быть..

Работает на jQuery.

let more400 = 0, 
    scroll = 50; // тот момент, когда будет меняться свойство хедера, в данном случае, через 50px от края == высоте блока .title 
$(window).bind('scroll', function(){ 
    if($(this).scrollTop() >= scroll && more400 === 0) { 
        more400 = 1; 
        $('.header').css('position','fixed'); 
    } else if($(this).scrollTop() < scroll && more400 === 1) { 
        more400 = 0; 
        $('.header').css('position','relative'); 
    } 
});

body {margin: 0;} 
 
.title { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: blue; 
  color: #fff; 
} 
 
.header { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: red; 
  position: relative; 
  top: 0; 
} 
 
.content { 
  width: 300px; 
  margin: 0 auto; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="title">Мой сайт</div> 
<div class="header">Ссылочки и т.п.</div> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet odio risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac maximus dolor. Cras ullamcorper, tellus non maximus scelerisque, tortor quam tristique nisl, sit amet porta purus orci et orci. Integer nunc nulla, convallis et tempus aliquet, consequat quis lectus. In non lectus semper, pulvinar arcu porttitor, mollis purus. Mauris vel nibh a nunc consequat congue quis sed ex. Vestibulum porta justo vel diam lacinia aliquet. Donec tempus, dolor quis rhoncus bibendum, arcu elit feugiat ex, vitae scelerisque lectus velit vel risus. Sed elit urna, tempus eget posuere non, placerat ac ipsum. Nulla volutpat mi metus, placerat imperdiet dui laoreet ac. Nunc tellus felis, tempus nec ligula at, viverra varius massa. Nullam libero enim, tempus vitae laoreet ac, viverra id massa. Suspendisse rhoncus risus rutrum gravida pretium. Nam a libero ultricies, porttitor ex eu, vulputate justo. Praesent vulputate eleifend ligula, quis placerat risus. </div>

На чистом CSS (колхоз)

body { 
  margin: 0; 
  position: relative; 
} 
 
.title { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: blue; 
  color: #fff; 
} 
 
.no_jquery { 
  display: block; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 9999; 
  pointer-events: none; 
} 
 
.ghost_title { 
  display: block; 
  width: 100%; 
  height: 50px; 
} 
 
.header { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: red; 
  pointer-events: auto; 
  position: sticky; 
  top: 0; 
} 
 
.content { 
  width: 300px; 
  margin: 0 auto; 
}

<div class="no_jquery"> 
  <div class="ghost_title"></div> 
  <div class="header">Ссылочки и т.п.</div> 
</div> 
<div class="title">Мой сайт</div> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet odio risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac maximus dolor. Cras ullamcorper, tellus non maximus scelerisque, tortor quam tristique nisl, sit amet porta purus orci et orci. Integer nunc nulla, convallis et tempus aliquet, consequat quis lectus. In non lectus semper, pulvinar arcu porttitor, mollis purus. Mauris vel nibh a nunc consequat congue quis sed ex. Vestibulum porta justo vel diam lacinia aliquet. Donec tempus, dolor quis rhoncus bibendum, arcu elit feugiat ex, vitae scelerisque lectus velit vel risus. Sed elit urna, tempus eget posuere non, placerat ac ipsum. Nulla volutpat mi metus, placerat imperdiet dui laoreet ac. Nunc tellus felis, tempus nec ligula at, viverra varius massa. Nullam libero enim, tempus vitae laoreet ac, viverra id massa. Suspendisse rhoncus risus rutrum gravida pretium. Nam a libero ultricies, porttitor ex eu, vulputate justo. Praesent vulputate eleifend ligula, quis placerat risus. </div>