Как заставить элемент придерживаться нижней части экрана с помощью jQuery? - PullRequest
Новая
       8

Как заставить элемент придерживаться нижней части экрана с помощью jQuery?

0 голосов
/ 26 октября 2018

У меня есть элемент div, который может быть виден или нет, когда веб-страница загружена и размещена между другими элементами div.Вот пример кода: 

<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>

Поэтому я хотел бы добавить класс ".sticky", когда нижняя часть окна браузера достигает нижней части элемента ".sticking-block", и удерживать его неподвижным при прокрутке донижняя часть веб-страницы.Или удалите класс «.sticky» при прокрутке вверх и достижении предыдущей позиции элемента.«.sticking-block» может быть видимым или нет на начальном экране, в зависимости от высоты элементов «.block».

Конечно, это некоторые вычисления высоты.Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Вы можете сделать это легко с помощью jQuery. Вот решение. пожалуйста, проверьте. 

    <html>
  <head></head>
  <body>


<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
    
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script>
  var $sticky = $('.sticking-block');
  var stickytop = $sticky.offset().top;
  
  $(window).scroll(function(){
    var scroll = $(window).scrollTop() + $(window).height();
    
    if (scroll >= stickytop) $sticky.addClass('sticky');
    else $sticky.removeClass('sticky');
  });
</script>
  </body>
</html>
0 голосов
/ 26 октября 2018

У вас что-то не так. Попробуйте этот пример. Надеюсь, это поможет вам.

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

<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="sticking-block">
  <div class="sticky">this block sticks to the bottom</div>
</div>
<div class="block">some content</div>
<div class="block">some content</div>

.block {
    position:relative;
    width: 100%;
    background: yellow;
 }
 .sticking-block {
   position:absolute;
   bottom:0;
   left:0;
   width: 100%;
   height: 30px; 
   background: red;
 }
 .sticking-block .sticky {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 999;
 }
...