Блог

Главная - Вопросы по программированию - Как сделать так, чтобы div отображался сверху при прокрутке вниз?

Как сделать так, чтобы div отображался сверху при прокрутке вниз?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я бы хотел, чтобы a div появлялся и скользил вниз при прокрутке заголовка.

Вот как это должно выглядеть:

http://www.space.com/11425-photos-supernovas-star-explosions.html

Вот что я получил до сих пор, но это не работает.

http://jsfiddle.net/nHnrd/

Ответ №1:

Вам нужно будет узнать высоту заголовка и его положение на странице, а затем просто показать или скрыть div в зависимости от значения scrollTop с помощью jquery.

Например:

 // Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top   $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

Тогда вам просто нужно установить .fixedDiv в положение:исправлено: сверху: 0; слева: 0;

Редактировать: я добавил функцию checkY(), которую вы можете вызывать при загрузке страницы, а также при прокрутке. Чтобы скрыть его изначально, просто используйте CSS.

Комментарии:

1. извините, только одна быстрая вещь.. как мне остановить его отображение в начале? вот мой файл: jsfiddle.net/nHnrd/14

2. @будет ли это возможно с помощью JavaScript, а не jQuery

3. Да, определенно, jQuery — это всего лишь библиотека javascript, в конце концов, но я понимаю, что вы имеете в виду. Это просто немного больше работы.

Ответ №2:

Возможно, вы захотите просто показать и скрыть свой div, а не псевдокласс и скрыть и показать

сначала: $(«#mydiv»).hide(); затем (при прокрутке): $(«#mydiv»).show();

установите, как вы хотите, чтобы ваш div выглядел, т.е. 0,0 и фиксированный

Используйте простой метод!

Ответ №3:

Я обновил ваш jsfiddle кое-чем, что вы можете попробовать.

Попробуйте это:
http://jsfiddle.net/nHnrd/10/

Кроме того, эта статья была полезной:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/