Как сделать плавное появление блока при прокрутке вниз (например, 300px)?

Здравствуйте.
Нужно сделать так, чтобы когда прокручиваешь страницу примерно на 300px вниз, появлялся блок внизу страницы и сразу же фиксировался там (right: 30px; bottom: 30px;)
  • Вопрос задан
  • 32419 просмотров
Решения вопроса 2
@ps1panda
Верстальщик, начинающий front-end
$(window).scroll(function(){
if($(window).scrollTop()>300){
$('#elem').show()
}

})


#elem{
display:none;
position:fixed;
right:30px;
bottom:30px;
}
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Это можно сделать примерно так: jsfiddle.net/9o8ky9kw/1
<div class="fixed hidden">
   Фиксированный блок
</div>

.fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 50px;
    background: #000;
}

.fixed.hidden {
    display: none;
}

var $win = $(window),
    $fixed = $(".fixed"),
    limit = 300;

function tgl (state) {
    $fixed.toggleClass("hidden", state);
}

$win.on("scroll", function () {
    var top = $win.scrollTop();
    
    if (top < limit) {
        tgl(true);
    } else {
        tgl(false);
    }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы