Changing Size and Content of Header at Scrolling in Browser with CSS

Changing size and content of header at scrolling in browser with CSS

Easy use jquery:

$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});

Make sure you have a js file though

Fixed footer, changing-height header, how to add scroll to the content between them?

If css3 is an option, you could use FLEXBOX

FIDDLE1 and FIDDLE2

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate
Recommandation) aims at providing a more efficient way to lay out,
align and distribute space among items in a container, even when their
size is unknown and/or dynamic (thus the word "flex"). -- from css-tricks

Markup:

<div class="container">
<header>The header text can change so the height can't be fixed. 
        Should never have a scrollbar
</header>
<div class="content">
Lorem ipsums in futurum.
</div>
<footer>
        The footer's height is fixed
</footer>
</div>

(Relevant) CSS:

.content
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0; /* triggers scroll */
    min-height: 0; /* triggers scroll */
}

A few points to mention:

1) I only apply flex-grow:1 (ie flex: 1 1 auto) to the scrollable content; the other items can have a fixed or dynamic height.

2) There's a hack(?) that I saw here, that placing height:0 on the container elements triggers a vertical scroll bar. (Here I used both height and min-height because this hack only worked in firefox with min-height)

3) For this to work in Firefox < 22 - you need to enable the flexbox runtime flag like this

4) Support for flexbox is surprisingly good in modern browsers (see here) but you need to add some browser specific css to get this working (see the above fiddle)

Div with dynamic header size and content with scroll bar

http://jsfiddle.net/ep1qab0v/3/ ,

I have updated the fiddle with overflow:hidden on the container div. which keeps it the same size. increase in content adds scroll bar to the content div and increase in header pushes the content div down. If I have understood your requirement correctly this is what you are looking for ?

Sticky header and footer scrollable content

Approach 1 - flexbox

It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.

jsFiddle

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;  display: flex;  flex-direction: column;}.header, .footer {  background: silver;}.content {  flex: 1;  overflow: auto;  background: pink;}

<div class="wrapper">  <div class="header">Header</div>  <div class="content">    <div style="height:1000px;">Content</div>  </div>  <div class="footer">Footer</div></div>

how to change the size of a fixed header

You don't need to used bootstrap's fixed-top - you just need to place your header in the right place. For your 'side' mode, the header needs to be inside the sidenav content so that it is pushed along with the content. For 'over' mode, the header needs to be above and outside the sidenav altogether. You can do this using template logic:

<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>

<mat-sidenav-container class="theme-sidenav-container" autosize>

    <mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
        ...
    </mat-sidenav>

    <mat-sidenav-content class="theme-main-content">

        <ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>

        <router-outlet></router-outlet>

    </mat-sidenav-content>

</mat-sidenav-container>

<ng-template #appHeader>
  <app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>

Here it is on StackBlitz. Note that I also removed the fixed-top class and defined defaults for mode and pushed.

This may not be exactly what you want, but it shows you how to dynamically change the header position. You may need to add layout to app-sidenav and the theme-main-content class.

Fixed header, footer with scrollable content

Something like this

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html> 

How to keep the header static, always on top while scrolling?

Note: This answer dates from 2010. Consider position: sticky in 2021, as mentioned in another answer.

---

Use position: fixed on the div that contains your header, with something like

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

In this example, when #content starts off 100px below #header, but as the user scrolls, #header stays in place. Of course it goes without saying that you'll want to make sure #header has a background so that its content will actually be visible when the two divs overlap. Have a look at the position property here: http://reference.sitepoint.com/css/position

Change header size and image on scroll

As informed by Luc, jQuery automatically sets overflow: hidden to height/width elements in animation. To prevent the overflow: hidden from occurring, you can download the latest version of jQuery from http://jquery.com/download/ and select the uncompressed version (http://code.jquery.com/jquery-1.10.2.js). Comment out line 9123 //style.overflow = "hidden". Save the file as a Javascript file and include this in your header as an external script file. Make sure to remove jQuery reference.

Additionally, I would suggest adding .stop() and change "slow" to a number you find suitable.

Here is the JSFiddle with jQuery and modifications: >>>CLICK HERE<<<

jQuery:

$(function(){
    var navIsBig = true;
    var $nav = $('nav');

$(document).scroll( function() {
   var value = $(this).scrollTop();

  if ( value > 100 && navIsBig ){
      $nav.stop().animate({
           height:45
      },1000);
      navIsBig = false;
  } else if (value <= 100 && !navIsBig ) {
      $nav.stop().animate({
          height:100,
      },1000);
      navIsBig = true;
  }
 });
 });

---

Related Topics