javascript - 底部粘性菜单可滚动第一个屏幕

Question

我曾经将导航栏粘在页面底部。它工作没有问题，但如果用户向下滚动页面导航栏开始出现在页面底部，我不想在第一页显示粘性导航栏。

.mobil-fixed-rez {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  transition: bottom 0.4s;
}

.mobilmi {
  display: block;
  width: 100%;
  height: 2.2rem;
  background: #466E91;
}

.mobil-fixed-link {
  padding-top: 0.425rem;
  color: white;
  text-decoration: none;
  font-size: 1rem;
}

<div class="mobil-fixed-rez">
  <div class="mobilmi">
    <div class="d-flex justify-content-center">
      <a href="#" class="mobil-fixed-link"><i class="crystal-bell"> </i> Reservation</a>
    </div>
  </div>
</div>

Answer 1

示例jsfiddle

你的 JavaScript 函数

//store the element
var $cache = $('.my-sticky-element');

//store the initial position of the element
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
$(window).scroll(function(event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop() + $(window).height();

  // whether that's below the form
  if (y >= vTop) {
    // if so, ad the fixed class
    $cache.addClass('stuck');
  } else {
    // otherwise remove it
    $cache.removeClass('stuck');
  }
});

你的CSS

.my-sticky-element.stuck {
  position: fixed;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.my-sticky-element {
  background-color: grey;
  color: white;
  font-family: sans-serif;
  padding: 5px 20px;
  width: 200px;
}

.container {
  /*container for centering element*/
  margin: 100px auto;
  width: 200px;
}

body {
  min-height: 1000px;
}

你的html

<div class="container">
  lorem 15<br /> lorem 14<br /> lorem 13<br /> lorem 12<br /> lorem 11<br /> lorem 10<br /> lorem 9<br /> lorem 8<br /> lorem 7<br /> lorem 6<br /> lorem 5<br /> lorem 4<br /> lorem 3<br /> lorem 2<br /> lorem 1<br /> lorem 1<br /> lorem 2<br /> lorem
  3
  <br /> lorem 4<br /> lorem 5<br /> lorem 6<br /> lorem 7<br /> lorem 8<br /> lorem 9<br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem
  <br /> lorem <br />
  <div class="my-sticky-element">This item will be stucked</div>
  lorem 15<br /> lorem 14<br /> lorem 13<br /> lorem 12<br /> lorem 11<br /> lorem 10<br /> lorem 9<br /> lorem 8<br /> lorem 7<br /> lorem 6<br /> lorem 5<br /> lorem 4<br /> lorem 3<br /> lorem 2<br /> lorem 1<br /> lorem 1<br /> lorem 2<br /> lorem
  3
  <br /> lorem 4<br /> lorem 5<br /> lorem 6<br /> lorem 7<br /> lorem 8<br /> lorem 9<br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem <br /> lorem
  <br /> lorem <br />
</div>

一旦你的滚动到达my-sticky-element.offset().top -->，元素就会被固定，并且它将保持固定，直到你向上滚动到该点.