Остановить навигацию / боковую панель от прокрутки - PullRequest
Новая
       21

Остановить навигацию / боковую панель от прокрутки

0 голосов
/ 03 мая 2018

Мне бы хотелось, чтобы навигационная панель прекратила прокручиваться, как только она приблизилась к нижней части, чтобы я все еще мог видеть нижний колонтитул. Я все еще изучаю некоторые из этих вещей, и я уверен, что есть лучшие способы сделать это, но это то, что у меня есть сейчас. 

$(window).scroll(function() {
  if ($(window).scrollTop() >= 1000) {
    $('#sticky').addClass('sticky');
  }
  else {
    $('#sticky').removeClass('sticky');
  }
});

Вот CSS: 

.sticky {
   position: fixed;
   top: 0;
   width: 292.5px;
   background-color: #fff;
   box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15);
   z-index: 9;
   padding-top: 0;
   padding-bottom: 0;
 }

HTML здесь по этой ссылке. (извините за путаницу) http://xmjvn.mdnyd.servertrust.com/

1 Ответ

0 голосов
/ 03 мая 2018

Попробуйте это: 

$(window).scroll(function() {
  const totalHeight = $(document).height();
  const windowHeight = $(window).height();
  const navHeight = $('#nav').height();
  const footerHeight = $('#footer').height();
  
  if (($(window).scrollTop() + navHeight) < (totalHeight - footerHeight)) {
    $('#nav').addClass('sticky');
  } else {
    $('#nav').removeClass('sticky');
  }
});
body {
  margin-top: 100px;
}

#nav {
  height: 100px;
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#nav.sticky {
  position: fixed;
  width: 100%;
}

#footer {
  margin-top: 1500px;
  background: tomato;
  height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">nav</div>
<div id="footer">footer</div>
...