Не могу получить и применить значение CSS свойства через JQ?

Question

[Novamoscow]

Пытаюсь записать текущее значение свойства 'left' в переменную 'a' и от этого значения отнимать значение скрола. Не работает. https://codepen.io/novamoscow/pen/vxRJOO

var left = $('.left-block');
var a;

$(window).scroll( function(){
    if ( $(window).scrollTop() > 10 && $(window).scrollTop() < 300) {

        $(left).css("left", $(window).scrollTop()+"px");
        $(left).css("top", $(window).scrollTop()+"px");
       }
    a = $('.left-block').css('left'); //Получаю значения а
    if ( $(window).scrollTop() > 301 ){

        $(left).css("left", a - $(window).scrollTop()+"px");
        $(left).css("top", $(window).scrollTop()+"px");

    }
});

Answer 1

[Евгений Тройнов]

Хмммм....

Для примера у вас

a = '32px' а $(window).scrollTop() = 55

если произвести вычитание:

'32px' - 55 = NaN

32px будет преобразовано не в 32 а в NaN, учите преобразование данных в JS.

Наверно вам нужно было что то похожее на это:

var left = $('.left-block'),
    a = 0,
    winST = 0; 

$(window).scroll( function() {
    winST = $(window).scrollTop();
  
    if ( winST > 10 && winST < 100) {
        $(left).css("left", winST + "px");
        $(left).css("top", winST + "px");
    }
  
    a = parseInt($('.left-block').css('left'));
 
    if ( winST > 100 ){
        $(left).css("left", (winST - a) + "px");
        $(left).css("top", winST + "px");
    }
});

На будущее пишите что вы хотите получить в итоге, а не то что у вас не работает на данный момент.

Comments

[Novamoscow]

Спасибо! Только вот не пойму, вставил ваш код и блок дергается теперь, что пошло не так ?

[Novamoscow]

Проблему понял. Нужно значение лефт умножить на два и уже из него вычитать скролл.

[Евгений Тройнов]

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

[Novamoscow]

Евгений Тройнов: если указать вместо А число (в уме 300 на 2 умножил получил 600 )
То все работает. А если в коде умножить а на 2 то не выходит

$(window).scroll( function() {
winST = $(window).scrollTop();

if ( winST > 0 && winST < 300) {
$(left).css("left", winST + "px");
$(left).css("top", winST + "px");
}

a = parseInt($('.left-block').css('left'));
/*a *= 2;*/
if ( winST > 300 ){
$(left).css("left", (600 /*a*/ - winST) + "px");
$(left).css("top", winST + "px");
}
});

[Novamoscow]

Евгений Тройнов: Так уже все работает, но если число самому писать, хочу до конца разобраться и универсальный скрипт написать

[Novamoscow]

Евгений Тройнов: Можно у вас пару вопросов в личке спросить ?

[Евгений Тройнов]

Novamoscow: да

Answer 2

[Егор Живагин]

+ "px" - работать будет и без этого)
Всё просто. css() возвращает строку, а ты к строке добавляешь число. Выходит NaN