JQuery прокрутите до счетчика пикселей сверху, а затем установите div, который будет зафиксирован сверху для остальной части прокрутки - PullRequest
Новая
       15

JQuery прокрутите до счетчика пикселей сверху, а затем установите div, который будет зафиксирован сверху для остальной части прокрутки

6 голосов
/ 04 января 2011

Я хочу изменить CSS для div, когда прокручиваю до определенной точки вниз по странице, на определенное количество пикселей сверху страницы.

При загрузке страницы я бы поместил div в статически. Как только я начал прокручивать страницу вниз и достиг точки сверху (скажем, 100px для демонстрационных целей), я хочу изменить статический div, чтобы он стал фиксированным, как 20px сверху. Что будет сделано через свойство css () jquery. Это позволило бы ему оставаться на фиксированном уровне 20 пикселей вниз по всей странице.

Какое свойство jquery я могу использовать, чтобы узнать, когда я достигну отметки 100px. Я хочу, чтобы это также вернулось, как только кто-то вернется наверх, чтобы div вернулось туда, где он был, когда страница загружалась, а не на 20 пикселей сверху.

Есть идеи?

Ответы [ 4 ]

5 голосов
/ 04 января 2011

Вы можете использовать событие scroll() для запуска кода и метод scrollTop() , чтобы увидеть, где вы находитесь.

Вотдемонстрация: http://jsfiddle.net/EahRx/

(я использовал указанные вами значения, поэтому есть скачок. Я уверен, что он будет выглядеть лучше на вашей реальной странице.) 

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS
        }                                           // It won't matter when static
    } else {
        if( fixed ) {
            fixed = false;
            $('#myDiv').css({position:'static'});
        }
    }
});

Переменная fixed предотвращает выполнение кода .css() большее количество раз, чем необходимо.

1 голос
/ 04 января 2011

Попробуйте использовать scrollTop: 

$(window).scroll(function(){
    if  ($(window).scrollTop() >= 100){
        //CSS changes go here
    }
});
0 голосов
/ 01 августа 2013

Я только что нашел это .Я думаю, что это действительно интересно;Мне понравилось.

0 голосов
/ 17 июля 2012

Вот замечательный плагин jQuery, который я обнаружил, который прекрасно справляется с задачей и дает вам некоторые полезные дополнительные функции, такие как установка смещения и изменение css между режимами «присоединен» и «отключен».

http://code.google.com/p/sticky-panel/

...