нижний колонтитул анимируется вверх при прокрутке и касается нижней части и анимируется вниз при прокрутке вверх

Question

Это вопрос, который когда-то задавали в другой вариации, и я пытался использовать код, но он не работает для меня. Я хочу, чтобы мой нижний колонтитул анимировался при прокрутке чуть-чуть до достижения дна и закрывался при прокрутке вверх. как на этом сайте - вы увидите, если прокрутите до конца. http://www.pronto.co.il

Это мой код:

Css:

body, html { height: 1000px; }

Html:

<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>

Я пытаюсь оставить код jquery, но я пока не понимаю, как именно он здесь работает. так что это ссылка на ответ - я взял его и использовал animate () вместо предупреждения. Анимация нижнего колонтитула вверх, когда вы достигаете нижней части экрана, но не анимирует вниз, когда вы прокручиваете обратно вверх

Мне очень поможет. большое спасибо

javascript jquery html css

0

Yehuda Menahem 28 Янв 2015 в 16:51

2

На сайте, который вы нам показали, нет ни анимации, ни чего-либо еще... нижний колонтитул находится внизу страницы.

–

Karl-André Gagnon

28 Янв 2015 в 16:54

Привет, обратите внимание, что при прокрутке вниз нижний колонтитул начинает подниматься, а при прокрутке назад он закрывается. идите легко, когда вы доберетесь туда, если это не нужно jquery, я буду более чем рад. Я новичок в программировании, так что... подумайте об этом...

–

Yehuda Menahem

28 Янв 2015 в 16:59

Я изучил страницу и могу сказать, что анимации нет. Это просто оптическая иллюзия, потому что все находится в фиксированном положении. Вот пример: jsfiddle.net/vx31w7ay

–

Karl-André Gagnon

28 Янв 2015 в 17:10

Я вижу и понимаю это сейчас. спасибо (: воспользуюсь им в другом случае, получил решение, которое хотел от Tambo, в ответе 2

–

Yehuda Menahem

28 Янв 2015 в 17:25

Answer 1

Вы можете добавить/удалить данный класс

var footer = document.querySelector("#footer");
window.onscroll = function(event) {
    ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};

А вот и твой css

#footer{
  position: fixed;
  bottom: 0;
  overflow:  hidden;
  height: 0;
  transition: height .3s ease
}
#footer.visible{
  height: 100px;/*what ever you want*/
}

0

Gildas.Tambo 28 Янв 2015 в 16:57

Answer 2

Как следует из комментария, по предоставленной вами ссылке нет анимации, но на основе вопроса о ссылке все просто:

var isShowing = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
        $('#footer').slideToggle();
        isShowing = true;
    } else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
        $('#footer').slideToggle();
        isShowing = false;
    }
});

body,
html {
  height: 1000px;
}
#footer {
  height: 150px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background:black;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>

0

DaniP 28 Янв 2015 в 17:00

По какой-то причине код не работает для меня. в любом случае, получил ответ от Тамбо в ответе 2, спасибо за ответ, очень ценю это (:

–

Yehuda Menahem

28 Янв 2015 в 17:27

нижний колонтитул анимируется вверх при прокрутке и касается нижней части и анимируется вниз при прокрутке вверх

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript