изменение высоты div на прокрутке

Что я хочу - это div в верхней части (заголовок), который будет на максимальной высоте (50 пикселей) при первой загрузке страницы, а когда вы прокручиваете страницу, я хочу, чтобы высота плавно уменьшаются до минимальной высоты 30 пикселей. Я предполагаю, что я должен использовать jQuery для этого, но я не настолько опытен, поэтому я не знаю решения на данный момент.изменение высоты div на прокрутке

Вот мой текущий, неразвитой HTML и CSS:

[HTML]

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 

    <body> 
     <!-- Header --> 
     <div id="header_parent"> 

     </div> 

     <!-- Body (homepage) --> 
     <div id="body_parent"> 

     </div> 

     <!-- Footer --> 
     <div id="footer_parent"> 

     </div> 

    </body> 
</html>

[CSS]

* { 
    margin:0 auto; 
    padding:0; 
} 

#header_parent { 
    max-width:1250px; 
    min-width:750px; 
    height:50px; 
}

Так было ясно, #header_parent элемент, что я говоря о.

Я также нашел веб-сайт, на котором они достигли этого вопроса: tvgids.tv (не смотрите на содержимое, это заголовок верхнего уровня, о котором я говорю. Я пробовал смотреть на исходный код, но это не так дайте мне больше знаний.)

источник

2015-02-23 YSbakker

Я добавил к #body_parent height, чтобы увидеть прокрутку, вы можете удалить эту строку с высотой после создания сайта.

Вот jsfiddle

$(window).on('scroll', function() { 
 
    var scrollTop = $(window).scrollTop(); 
 
    if (scrollTop > 50) { 
 
     $('#header_parent').stop().animate({height: "30px"},200); 
 
    } 
 
    else { 
 
     $('#header_parent').stop().animate({height: "50px"},200); 
 
    } 
 
});

* { 
 
    margin:0 auto; 
 
    padding:0; 
 
} 
 

 
#header_parent { 
 
    max-width:1250px; 
 
    min-width:750px; 
 
    height:50px; 
 
    background:#000; 
 
    position:fixed; 
 
} 
 

 
#body_parent { 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body> 
 
    <!-- Header --> 
 
    <div id="header_parent"> 
 
     
 
    </div> 
 
    
 
    <!-- Body (homepage) --> 
 
    <div id="body_parent"> 
 
     
 
    </div> 
 
    
 
    <!-- Footer --> 
 
    <div id="footer_parent"> 
 
     
 
    </div> 
 
    
 
</body>

Или HTML

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 

    <body> 
     <!-- Header --> 
     <div id="header_parent"> 

     </div> 

     <!-- Body (homepage) --> 
     <div id="body_parent"> 

     </div> 

     <!-- Footer --> 
     <div id="footer_parent"> 

     </div> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Your jQuery/Javascript code --> 
    <script type="text/javascript"> 
    $(window).on('scroll', function() { 
     var scrollTop = $(window).scrollTop(); 
     if (scrollTop > 50) { 
      $('#header_parent').stop().animate({height: "30px"},200); 
     } 
     else { 
      $('#header_parent').stop().animate({height: "50px"},200); 
     } 
    }); 
    </script> 
    </body> 
</html>

И если вы хотите установить гладкостью заменить 200 с вашим номером, 200 средняя продолжительность в миллисекундах.

$('#header_parent').stop().animate({height: "50px"},200);

источник

2015-02-24 12:19:49 quead

Выглядит отлично уже, но это не совсем так, как я имел в виду быть. Я хочу, чтобы высота динамически менялась с помощью колесика прокрутки. Однако это отличное решение, спасибо. – YSbakker

Вы можете сделать это без jQuery.

var header = document.getElementById("header_parent"); 

window.onscroll = function(e) { 
    if(window.scrollY) { 
     if(window.pageYOffset > 50) { 
      header.style.height = 30; 
     } else { 
      header.style.height = 50; 
     } 
    } 
}

Вы также можете переключить имена классов внутри if блока вместо установки высоты в явном виде.

источник

2015-02-23 14:50:22 Mark

Выглядит хорошо, но где я его положу? – YSbakker

Добавьте его в тег перед закрытием тега . Вы также можете ссылаться на отдельный файл

изменение высоты div на прокрутке

ответ

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