Заголовок изменяется при прокрутке вниз (jQuery)

Ответ 1

Это не слишком сложно, это просто .scroll() событие. Я не могу показаться, что это делается в скрипке из-за расположения панелей Проверить EDIT!. Но в основном у вас есть div сверху position: absolute, поэтому он всегда сверху, затем используйте .scroll()

$("body").scroll( function() {
    var top = $(this).scrollTop();
    // if statement to do changes
});

Метод scrollTop() используется для определения того, сколько прокручивается body.

И в зависимости от того, где вы хотите изменить свой заголовок div, вы можете заставить свой оператор if делать много вещей. В случае примера, который вы указали, это будет что-то вроде

if ( top > 147 )
    // add the TechCrunch div inside the header
else
    // hide the TechCrunch div so that space is transparent and you can see the banner

EDIT

Ура! Я смог сделать эту скрипку, чтобы продемонстрировать пример!:)

Удачи!

Ответ 2

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

JSfiddle: http://jsfiddle.net/Lighty_46/27f4k/12/

$(document).ready(function () {

var bluebutton = $('#blue_link').offset().top - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
        var y = $(this).scrollTop();

    // whether that below the top of the div
        if (y >= bluebutton) {

    // if so, ad the fixed class
        $('.home_nav').addClass('blue_selected');

}

    // whether you have passed the bottom of the div
        if (y >= bluebuttonbottom) {

    // if so remove the selected class
        $('.home_nav').removeClass('blue_selected');

        } else {

    // otherwise remove it
        $('.home_nav').removeClass('blue_selected');
}

});
});

SO в основном,

• $('# blue_link') был верхним div, я хотел вызвать изменение класса
• $('# blue_block_bottom') был div, который я хотел вызвать для удаления класса
• $('# main_nav') был мой фиксированный заголовок

Итак, когда нижняя часть моего заголовка достигает вершины div, класс "blue_selected" применяется к ".home_nav"..... тогда, если нижняя часть div передает нижнюю часть заголовка, класс "blue_selected" удаляется из ".home_nav".

Вам нужно будет повторить это для каждой из ваших кнопок с помощью соответствующих

Я тестировал его в Chrome, Firefox и IE от 10 до 8 (работает в 8, но скрипка слегка разрывается).

Надеюсь, что это поможет, возможно, это не лучший способ сделать это со всей честностью, и, вероятно, у него есть некоторые ошибки там, но это был единственный, с которым я работал.

Ответ 3

Посмотрите Плавающие Divs

То, что вы ищете, - это то, что вам нужно определить Div как плавающее Div, а затем оно всегда остается на странице всякий раз, когда вы прокручиваете. В Techcrunch у них есть заголовки в верхней части Центра, поэтому он всегда остается там

Ответ 4

Здесь одна идея

• Привязать к событию document.body.onscroll
• onscroll проверьте положение прокрутки. если не наверху, замените изображение на панели
• если он сверху, отобразите другое изображение

Ответ 5

Хотя ответы до этого кажутся идеальным решением, похоже, что TechCrunch использует z-index и фиксированное позиционирование для создания этого эффекта прокрутки.

Как видно из изображения выше, как большой, так и малый заголовок находятся на экране, и это не произойдет без настройки события прокрутки jQuery.

Ответ 6

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

<script src='js/jquery-1.9.1.min.js' type="text/javascript"></script>
<script>
    $(document).on("mobileinit", function() {

        $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
        $.mobile.fixedtoolbar.prototype.options.hideDuringFocus = "";

    });
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

Ответ 7

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});