изменить цвет заголовка при прокрутке

Я сразу же перейду к погоне, в основном, я хочу, чтобы мой заголовок шел из прозрачного (без атрибута фона в css), чтобы иметь background-color белого цвета на прокрутке.изменить цвет заголовка при прокрутке

Я использую этот JavaScript и никуда не денутся.

$(window).scroll(function() { 
    var changeNav = 'rgba(0, 0, 0, 0.36)' 
    if ($(window).scrollTop() > 200) { 
     changeNav = '#ffffff'; 
    } 
    $(.header).css('background-color', changeNav); 
});

Также есть способ, которым я могу заставить его вернуться на себя? Итак, я нахожусь в нижней части страницы, а заголовок имеет background-color белого цвета, но когда я прокручиваю верх, JavaScript извлекает атрибут? Я играл и искал, но ничего не мог найти.

Примечание: я получил этот кусок JavaScript из другого места на переполнение стека, here

Спасибо большое

источник

2015-06-02 Josh Murray

У вас есть jquery linked? – www139

Этот код * есть * JavaScript или, лучше, библиотека JavaScript под названием [jQuery] (https://jquery.com/), поэтому вам нужно включить/вызвать эту библиотеку, чтобы ее использовать. См. Мою демонстрацию для примера на jsBin. –

Возможный дубликат [Изменить цвет фона заголовка при прокрутке страницы] (https://stackoverflow.com/questions/28266651/change-header-background-colour-when-page-scrolls) –

jsBin demo

$(.header) должен быть $(".header")

также ваш сценарий может быть «упрощенным» на:

$(window).scroll(function() { 
    var scrolled = $(this).scrollTop() > 200; 
    $(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)"); 
});

Примечание, что выше будет сила.header фон изменение цвета (даже от #FFF до #FFF) на каждом свитке. Для рычагов, которые и, чтобы убедиться, что у вас есть правильные цвета, даже если пользователь изменяет размер окна использования:

$(function() { // DOM ready to be manipulated 

    var $header = $(".header"); // Cache elements for intensive actions 
    $(window).on("scroll resize", function() { 
     if($(this).scrollTop() > 200){ 
      $header.css('background-color', "#fff"); 
     }else{ 
      $header.css('background-color', "rgba(0, 0, 0, 0.36)"); 
     } 
    }); 

});

Ofc, сделать посудить вы включили библиотеку JQuery внутри <head> вашего документа :

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

источник

2015-06-02 23:33:29

изменить цвет заголовка при прокрутке

ответ

Смежные вопросы