Добавить дополнительный верх .offset () - PullRequest
Новая
       5

Добавить дополнительный верх .offset ()

0 голосов
/ 22 мая 2018

Мне было интересно, как добавить дополнительный 'top' .offset () к этому div;

mapstick

Я думаю, это что-то, что нужно сделать startPosition ??Я думал, что смогу изменить его в CSS, но это просто сломало функцию div, отклеивающуюся на определенной высоте.

Я попытался в CSS сделать верхнюю точку px '!кольной' в div.Это то, что сломало оператор if / else, поскольку он испортил фактическую верхнюю часть div, и скрипт не понял, как это выглядит. 

var navWrap = $('#navWrap'),
    nav = $('#mapstick'),
    startPosition = navWrap.offset().top,
    stopPosition = $('#stopHere').offset().top - nav.outerHeight();

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop()

    if (y > startPosition) {
        nav.addClass('sticky');
        if (y > stopPosition) {
            nav.css('top', stopPosition - y);
        } else {
            nav.css('top', 0);
        }
    } else {
        nav.removeClass('sticky');
    }
});

Мне просто нужны дополнительные 70px сверхуdiv, так что он может быть полностью видимым.

Я также рассмотрел использование этого; 

.offset({ top: 70 });

Я думаю, что использовал это неправильно, поскольку это только испортило вещи.

1 Ответ

0 голосов
/ 22 мая 2018

Оказывается, я могу просто изменить другой класс для дочернего элемента div, чтобы получить желаемый эффект.Итак, я только что добавил дополнительный 'addClass' в оператор if, и, похоже, он добился цели.

Это скрипт, который у меня сейчас есть; 

var navWrap = $('#navWrap'),
    nav = $('#mapstick'),
    maptop = $('#map')
    startPosition = navWrap.offset().top  ,
    stopPosition = $('#stopHere').offset().top   - nav.outerHeight();

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop()

    if (y > startPosition) {
        nav.addClass('sticky'),
        maptop.addClass('maptop');
        if (y > stopPosition) {
            nav.css('top', stopPosition - y);
        } else {
            nav.css('top', 0);
        }
    } else {
        nav.removeClass('sticky'),
        maptop.addClass('maptop');
    }
});

Я добавилв 'maptop' для оператора if, который работает.Я не знаю, если это лучший способ сделать это, но он работает, и я в порядке с этим LOL

...