$(window).scroll(function(){ if($(document).scrollTop() > 0) { $('.header_wrap').addClass('scrolled'); } else { $('.header_wrap').removeClass('scrolled'); } });
<div class="header_wrap"> <div class="header"> <h2 class="logo"> LOGO </h2> </div> </div> <div id="container"> <p>contents line 1</p> <p>contents line 2</p> <p>contents line 3</p> <p>contents line 4</p> <p>contents line 5</p> <p>contents line 6</p> <p>contents line 7</p> <p>contents line 8</p> <p>contents line 9</p> <p>contents line 10</p> <p>contents line 11</p> <p>contents line 12</p> <p>contents line 13</p> <p>contents line 14</p> <p>contents line 15</p> <p>contents line 16</p> <p>contents line 17</p> <p>contents line 18</p> <p>contents line 19</p> <p>contents line 20</p> </div>
body { margin: 0; background-color: #b8b8dc; } .header_wrap { height: 120px; } .header_wrap .header { position: fixed; top: 0; width: 100%; height: 120px; background: parent; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; } .header_wrap .header .logo{ margin: 0; padding: 0 30px; font-size: 40px; line-height: 120px; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; } .header_wrap.scrolled { height: 60px; } .header_wrap.scrolled .header { height: 60px; background-color: #ffffff; } .header_wrap.scrolled .header .logo{ font-size: 20px; line-height: 60px; }