крепежные элементы при прокрутке?

Question

крепежные элементы при прокрутке?

0

Итак, у меня есть div, который я пытаюсь сохранить на 100 пикселей с верхней части страницы между точками страницы во время прокрутки. На данный момент мой код работает-ish, но div не поддерживается ровно на 100 пикселей сверху, вместо этого изменяется от 0px до 200px

вот что я использую atm:

$(window).scroll(function(){
var tpxl = $(window).scrollTop();
if( tpxl<100) {
$('#div').css('top',-Math.abs(tpxl)+100 + 'px');
}
else if(tpxl>700) {
$('#div').css('top',-Math.abs(tpxl)+800 + 'px');
}
});

Hello World 09 нояб. 2013, в 22:05

Источник

Теги:

javascript

jquery

scroll

1 ответ

Ещё вопросы

nnnnnn · Answer 1 · 2013-11-09T19-32-00.000Z

Вам не нужен Math.abs() потому что tpxl всегда будет положительным числом. Чтобы установить позицию div равным 100px из текущей вершины окна, используйте $(window).scrollTop() + 100 + 'px'.

Я действительно не понимаю, почему у вас есть структура if/else if. Следующие будут держать div фиксированным на 100px все время:

$(window).scroll(function () {
    $('#div').css('top', $(window).scrollTop() + 100 + 'px');
}).scroll();

Демо: http://jsfiddle.net/G5BVU/

Чтобы установить положение "фиксировано", когда точка прокрутки меньше 100 или более 700, как для вашего исходного кода, попробуйте следующее:

$(window).scroll(function () {
    var tpxl = $(window).scrollTop();
    if (tpxl < 100 || tpxl > 700) {
        $('#div').css('top', tpxl + 100 + 'px');
    }
}).scroll();

Демо: http://jsfiddle.net/G5BVU/1/

РЕДАКТИРОВАТЬ. Чтобы прокрутка элемента была нормальной, за исключением случаев, когда окно прокручивается между этими двумя точками, просто отмените условие if из моего предыдущего примера:

if (tpxl > 100 && tpxl < 700)
    $('#div').css('top', tpxl + 100 + 'px');

http://jsfiddle.net/G5BVU/2/

Во всех случаях при необходимости устанавливайте начальную top настройку.

Я должен был объяснить это лучше; Мне нужно, чтобы элемент прокручивался вместе с остальными элементами, пока расстояние прокрутки окна не достигнет 100 пикселей, затем я хочу, чтобы элемент оставался сверху на 100 пикселей, пока расстояние прокрутки окна не достигнет 700 пикселей.
Посмотрите мое обновление и заключительную демонстрацию - это может быть не совсем то, что вы ищете, но я надеюсь, что это даст вам достаточно идеи, чтобы закончить это самостоятельно. Что бы вы ни делали, вам не нужно отрицать значение tpxl или использовать -Math.abs(tpxl) .
Это может быть проблема с моим браузером / оборудованием, но элементы все еще дрожат во время прокрутки
Я тестировал в Chrome, и я вижу только небольшое дрожание в зависимости от того, как быстро я прокручиваю, но помните, что элемент (вместе со страницей) будет слегка перемещаться при каждом событии прокрутки, прежде чем ваш код вернет его в это положение, поэтому некоторый джиттер неизбежно Если вы хотите, чтобы это было гладко, попробуйте использовать position:fixed вместо постоянного обновления top позиции.