Исправлена ​​липкая панель навигации, чтобы она появлялась там, где она начиналась при прокрутке вверх.

Question

Я пытаюсь создать плавающую панель навигации, которая появляется при прокрутке вверх и исчезает при прокрутке вниз.

Моя единственная проблема заключается в том, что панель начинается не сверху веб-сайта, а под заголовок. С помощью этого кода мне удалось заставить его появиться / исчезнуть, но он не возвращается обратно в исходное положение при прокрутке вверх. Он просто застревает в верхней части окна браузера.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down && past navbar, add class .nav-up
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('sticknav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('sticknav').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

Мой css для панели навигации - это

sticknav {
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
transition: top 0.2s ease-in-out;
position: relative;
z-index: 9999;
}

.nav-up {
    top: -40px;
    position: fixed;
}

.nav-down {
    top: 0px;
    position: fixed;
}

, а stickynav - моя панель навигации.

Я знаю, это потому, что я oop в положении: исправлено; состояние, но я не могу обернуться, как это исправить.

Answer 1

CSS sticky - хороший вариант для этого. Единственным недостатком является отсутствие поддержки IE11 .

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Scroll more than delta
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  // If scrolled down && past navbar, add class .nav-up
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down
    $('.sticknav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('.sticknav').removeClass('nav-up').addClass('nav-down');
    }
  }

  lastScrollTop = st;
}

.sticknav {
  z-index: 9999;
  position: -webkit-sticky;
  position: sticky;
}

.sticknav {
  height: 40px;
  background: red;
}

.nav-up {
  top: -40px;
  transition: top 0.2s ease-in-out;
}

.nav-down {
  top: 0px;
  transition: top 0.2s ease-in-out;
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="buffer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
</div>
<header class="sticknav"></header>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </p>
</div>