Добавить тень в нижней части заголовка при прокрутке

Целью является добавление тени к нижней части заголовка с фиксированным расположением при прокрутке окна. Но по какой-то причине этот код, похоже, не работает. Когда я прокручиваю, ничего не происходит. Любая помощь будет оценена.Добавить тень в нижней части заголовка при прокрутке

КОД

Сценарий Java записывается в головной части моего HTML документа.

<script> 
 
$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 0) { 
 
\t $("#header-home").addClass("shadow"); 
 
    } 
 
    else { 
 
\t $("#header-home").removeClass("active"); 
 
    } 
 
}); 
 
</script>

#header-home{ 
 
    position:fixed; 
 
    width:100%; 
 
    top:0; 
 
    left:0; 
 
    background-color:#fff; 
 
    z-index:900; 
 
} 
 

 
.active { 
 
    box-shadow: 0 4px 2px -2px #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<header id="header-home"> 
 
    <!-- header content here --> 
 
</header>

источник

2016-07-05 M.Hasham

вы добавляете класса 'shadow', но в вашем CSS этого имя' active' –

голосования за закрытия для опечатки ошибки – vsync

У вас было несколько проблем. Во-первых, вы применяли класс «тень», но удаляли класс «активным» (должен был быть тень/тень), а во-вторых, теневой код не работал. Используйте команду this link для создания кода теневого кода.

Этот пример демонстрирует, что ваш код был в основном правильным после исправления вышеупомянутых ошибок.

$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
    $("#header-home").addClass("shadow"); 
 
    } 
 
    else { 
 
    $("#header-home").removeClass("shadow"); 
 
    } 
 
});

html,body{height:2000px;} 
 
#header-home{position:fixed; height:50px;width:100%; top:0; left:0; xbackground-color:black; xcolor:#fff; z-index:900;} 
 

 
.active { box-shadow: 0 4px 2px -2px #f1f1f1; } 
 
.shadow {border:3px solid orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    
 
<header id="header-home"> 
 
     header content here 
 
</header>

источник

2016-07-05 11:15:05 gibberish

Спасибо, Таблетка. –

В своем коде вы имеете

$("#header-home").addClass("shadow");

Что я должен ожидать

$("#header-home").addClass("active");

источник

2016-07-05 11:08:33

как уже было сказано в комментариях. нет необходимости делать ответ из комментария, особенно в комментариях кого-то другого. – vsync

@vsync Я писал свой ответ, когда он сделал мой комментарий, и не заметил этого до тех пор. Кроме того, вы должны избегать ответов на вопросы в комментариях в соответствии с заголовком: «Используйте комментарии, чтобы запросить дополнительную информацию или предложить улучшения. Избегайте ответов на вопросы в комментариях». –

Добавить тень в нижней части заголовка при прокрутке

ответ

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