1

Помогите пожалуйста, есть вот такое меню codepen Как добиться плавности прилипания меню хотя бы как тут hashiva

var num = 300; //number of pixels before modifying styles
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > num) {
    $('.container').addClass('fixed');
  } else {
    $('.container').removeClass('fixed');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<div class="block regular"></div>

1
  • там в вопросе я прикрепил пример, что непонятного ? 1 дек 2017 в 8:39

3 ответа 3

1

Задайте классу fixed свойство transition в css. Например:

transition: all 0.5s ease-out;

Или, если по простому, то можно задать:

position: sticky;

Второй вариант работает без js.

1

можно добавить просто transition: all .3s;

$(window).scroll(function() {
  if ($(window).scrollTop() >= 700) {
    $('.container').addClass('fixed');
  } else {
    $('.container').removeClass('fixed');
  }
});
ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}

body {
  height: 3000px;
  background-color: #ccc;
  margin: 0;
}

.container {
  padding: 5px;
  background-color: navy;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  transition: all .3s;
}

.fixed {
  width: 100%;
  position: fixed;
  left: 5px;
  top: 5px;
  padding: 20px 0;
  transition: all .3s;
}

.block {
  background-color: #ccc;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<div class="block regular"></div>

1

Если кому-то нужен ответ на это в 19м году, то вот.

Сделаем эффект "выезда" из верхней границы.

let menuElem = $('.menu'), // Элемент который будет прилепать
    menuFixed = 300, // кол-во пикселей от границы, когда меню "прилипнет" к краю экрана.
    menuStatus = false; // Некая оптимизация.


$(window).on('scroll', function() {
  if($(this).scrollTop() >= menuFixed && menuStatus === false) {
    menuStatus = true;
    menuElem.addClass('--fixed').animate({'top':'0%'}, 500, 'linear');
  } else if($(this).scrollTop() < menuFixed && menuStatus === true) {
    menuStatus = false;
    menuElem.animate({'top':'-100%'}, 300, 'linear', function(){
      menuElem.removeAttr('style').removeClass('--fixed');
    });
  }
});
body {
  margin: 0;
  height: 1000px;
}

.menu {
  display: block;
  width: 100%;
  height: 50px;
  background: blue;
}

.menu.--fixed { /* .--fixed - это тот самый класс, который будет добавлятся, чтобы "прижать" меню */
  position: fixed;
  top: -100%; /* -100% для того, чтобы выезд сделать плавным. */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ----- -->
<div class="menu"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.