时间戳

首页 > 解决方案 > 底部粘性菜单可以滚动第一个屏幕

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

问题描述

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

.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>

标签： javascriptjquerybootstrap-4

解决方案

示例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 --> 元素就会得到固定并且它将保持固定，直到您向上滚动该点。

推荐阅读