Липкий нижний колонтитул после завершения прокрутки - PullRequest
Новая
       55

Липкий нижний колонтитул после завершения прокрутки

0 голосов
/ 28 апреля 2020

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

Я пытался использовать position:sticky, но затем он уже прикреплен к нижней части окно просмотра, когда страница только что загружена. Я хочу это только после полной прокрутки вниз.

Есть какие-нибудь подсказки? Заранее спасибо.

Ответы [ 4 ]

2 голосов
/ 28 апреля 2020

Это пример с javascript (см. Результат липкая кнопка на вершине прокрутки 

const DIRECTION_BOTTOM = 1;
const DIRECTION_TOP = 0;

let previousScroll = 0;
let direction = scrollY === 0 ? DIRECTION_BOTTOM : DIRECTION_TOP;

window.addEventListener('scroll', function(){
    const scrollY = window.scrollY;

    if(direction === DIRECTION_TOP && previousScroll < scrollY){
        direction = DIRECTION_BOTTOM;

        // remove sticky
        document.getElementById("sticky").classList.remove("show");
    }
    else if(direction === DIRECTION_BOTTOM && previousScroll > scrollY ){
        direction = DIRECTION_TOP;

        // Add sticky 
        document.getElementById("sticky").classList.add("show");
    }

    previousScroll = scrollY;
})
0 голосов
/ 28 апреля 2020

Все перемешали, и теперь это работает: 

```window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
document.getElementById("see-also").classList.add("sticky");
}};```

Спасибо всем вам

0 голосов
/ 28 апреля 2020

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

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
  

  
 $(window).on("scroll", function() {
    if($('#button').isInViewport()) {
        $('#button').addClass('sticky');
    }
 });
body {
  text-align: center;
}

.button {
  padding: 6px 12px;
}

.div {
  width: 100%;
  height: 250px;
  color: #fff;
}

.div1 {
  background: blue;
}
.div2 {
  background: red;
 }
 .div3 {
  background: purple;
 }
 
 .sticky {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  height: 100%;
  bottom: 5px;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="div div1">Filler div 1</div>
<div class="div div2">Filler div 2</div>
<div class="div div3">Filler div 3</div>

<button type="button" class="button" id="button">See Also</button>
0 голосов
/ 28 апреля 2020

Go до css и добавьте в нижний колонтитул z-index: -1;, чтобы при загрузке страницы нижний колонтитул не имел права позиционирования слоя, а когда прокрутка вниз превышает go до javascript и изменяет его на z-index: 1000 поэтому он имеет абсолютную привилегию позиционирования слоя

И на вашем месте я бы добавил transition и, возможно, немного translateX, поэтому, когда появляется нижний колонтитул, появляется немного эффекта анимации

...