изменить точки на прокрутке [дубликат]

Короткий ответ: вам нужно выполнить обратный вызов следующим образом:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});
12
задан Josh Crozier 11 December 2013 в 03:04
поделиться

2 ответа

Возможно, вы просто можете использовать javascript element.scrollTop вместе с JQuery addClass и removeClass. Я не пробовал это сам.

Вот ссылка переполнения для получения позиции полосы прокрутки: Как получить позицию полосы прокрутки с помощью Javascript?

1
ответ дан Community 24 August 2018 в 09:47
поделиться

Самый простой способ выполнить то, что вы пытаетесь сделать, это комбинация некоторого простого javascript (в данном случае jQuery) и переходов CSS3.

Мы будем использовать JS для проверки окон прокручивать позицию в каждом событии прокрутки и сравнивать ее с расстоянием дна элемента #main - если положение прокрутки больше, тогда мы применим класс к телу, чтобы указать, что мы прокрутили прошлое #main, а затем мы будем использовать CSS для определения стиля навигации для этого «состояния».


Итак, наша основная разметка:

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

И наш javascript:

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    var stop = Math.round($(window).scrollTop());

    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

И наши стили:

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Рабочий пример на Codepen

Вот как я это сделал здесь . Я также использую дросселирование прокрутки и немного более сложную семантику моделирования, но это суть этого.

35
ответ дан Félix Gagnon-Grenier 24 August 2018 в 09:47
поделиться
Другие вопросы по тегам:

Похожие вопросы: