Фиксированный блок

221

25 марта 2017, 01:15

Есть простая реализация, но дело в том что нужно чтобы блок начал фиксацию чуть раньше, не от верха окна браузера а допустим на 50px от него

$(function() { 
  var topPos = $('.floating').offset().top; //topPos - это значение от верха блока до окна браузера 
  $(window).scroll(function() { 
    var top = $(document).scrollTop(); 
    if (top > topPos) $('.floating').addClass('fixed'); 
    else $('.floating').removeClass('fixed'); 
  }); 
});

.floating {} 
 
.fixed { 
  max-width: 240px; 
  position: fixed; 
  top: 0px; 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<br><br><br><br><br><br><br><br><br><br> 
<div class="floating">Блок</div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

нужно в js добавить, и в css добавить... разницу в 50px.. иначе будут рывки

var top = $(document).scrollTop();

$(function() { 
  var topPos = $('.floating').offset().top; //topPos - это значение от верха блока до окна браузера 
  $(window).scroll(function() { 
    var top = $(document).scrollTop() + 50; 
    if (top > topPos) $('.floating').addClass('fixed'); 
    else $('.floating').removeClass('fixed'); 
  }); 
});

.floating {} 
 
.fixed { 
  max-width: 240px; 
  position: fixed; 
  top: 50px; 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<br><br><br><br><br><br><br><br><br><br> 
<div class="floating">Блок</div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>