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->时，元素将被固定，并且将保持固定，直到您向上滚动该点为止。

Answer 2

好的，这段代码对我来说很完美

HTML代码

<div id="sticky-reservation">
      <div class="d-flex justify-content-center">
         <a href="#" class="mobil-fixed-link"><i class="fas fa-concierge-bell"></i> Reservation</a>
      </div>
   </div>

CSS代码

#sticky-reservation {
          background: #466E91;
          position: fixed;
          bottom: -60px;
          width: 100%;
          height: 50px;
          display: block;
          transition: top 0.3s;
          z-index: 1030;
        }

Javascrip代码

<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 480 || document.documentElement.scrollTop > 480) {
    document.getElementById("sticky-reservation").style.bottom = "0";
  } else {
    document.getElementById("sticky-reservation").style.bottom = "-60px";
  }
}
</script>

底部粘滞菜单可滚动第一个屏幕

2 个答案: