Боковая панель неконтролируемо прыгает, когда высота изменяется при прокрутке

Question

Боковая панель неконтролируемо прыгает, когда высота изменяется при прокрутке

0

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

$(window).scroll(function() {
    if ($(this).scrollTop() < 125){
        var v = 125 - $(this).scrollTop();
        $("#sidebar").css({'top':v + 'px'});
    }
    if ($(this).scrollTop() >= 125)
    {
        $("#sidebar").css({'top':'5px'});
    }
});

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

Ben Johnson mk2 11 нояб. 2013, в 23:08

Источник

1

Вам нужно предоставить больше кода и / или пример jsfiddle
Dom 11 нояб. 2013, в 21:48
1

jsfiddle.net/B55W7
Ben Johnson mk2 11 нояб. 2013, в 21:52

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вам нужно предоставить больше кода и / или пример jsfiddle

War10ck · Answer 1 · 2013-11-11T19-31-00.000Z

Посмотрите эту скрипку.

Создайте класс CSS с исправлением.

.fixed {
    position: fixed;
    top: 0px;
}

В прокрутке в вашем JavaScript добавьте и удалите "фиксированный" класс соответственно, чтобы сделать правильный эффект.

JavaScript:

$(function () {
    var $sidebar = $('#sidebar');
    $(window).on('scroll', function () {
        if($(this).scrollTop() < 125) {
            $sidebar.removeClass('fixed');
        } else {
            $sidebar.addClass('fixed');  
        }
    });
});

Когда заголовок прокручивается из окна, боковая панель получает "фиксированный" класс и прилипает к боковой стороне экрана в верхнем левом углу (0,0) соответственно. Когда заголовок возвращается в поле зрения, класс удаляется, и боковая панель изящно возвращается к исходной позиции.