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

Question

[Человек]

Здравствуйте.
Нужно сделать так, чтобы когда прокручиваешь страницу примерно на 300px вниз, появлялся блок внизу страницы и сразу же фиксировался там (right: 30px; bottom: 30px;)

Answer 1

[Дмитрий Пыркин]

$(window).scroll(function(){
if($(window).scrollTop()>300){
$('#elem').show()
}

})

#elem{
display:none;
position:fixed;
right:30px;
bottom:30px;
}

Comments

[Человек]

Подскажите как сделать просто на js.

[Дмитрий Пыркин]

jsfiddle.net/ps1panda/2nq3hbg7

[Mihard_two]

Три строки а работает на 5+. Спасибо.

Answer 2

[Денис Инешин]

Это можно сделать примерно так: 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);
    }
});

Comments

[Человек]

Большое спасибо!

[Кирилл Туровников]

Надо в условие добавить проверку, чтобы триггер не срабатывал повторно при прокрутке, для этого добавить проверку класса .hasClass("hidden")

[eugene_d_dev]

Зачем jquery в данном примере?))

[Денис Инешин]

fajjet: Затем, что многими jQuery воспринимается гораздо проще и оно гарантирует кроссбраузерность ie8+. В любом случае, показан принцип. На JS реализация будет отличаться незначительно.

[Человек]

Денис Инешин: а как на js сделать? куда копать?
Все что я на js умею делать,это только немного на canvas рисовать..

[Денис Инешин]

Человек: вовсе не нужно писать это на чистом JS, тем более если не умеете.

[Человек]

Денис Инешин: это да, я учусь.
Но мне нужно установить на сайте вордпресс такую штуку, как вы сделали, но она должна быть только на js & (html+css)

[Денис Инешин]

Человек: да что за выдумки, вордпресс никак не мешает поставить туда jQuery.

[Человек]

Денис Инешин: не выдумки, там стоит visual composer для построения сайтов, в нем есть блоки только под хтмл+джс. Сайт не мой, не хочу туда ничего устанавливать. Помогите, пожалуйста, или направте где искать такое.