resize header on scroll

问题

I want to resize the header when the user scrolls and resize it again when the page is at the top. I have this example HTML

<header class="header">
</header>
<section>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>

this CSS

* { margin: 0; padding: 0; }

body {
  height: 1000px;
}

.header {
   width: 100%;
  height: 200px;
  background: red;
  position: relative;
  -webkit-transition: linear .3s;
     -moz-transition: linear .3s;
      -ms-transition: linear .3s;
       -o-transition: linear .3s;
          transition: linear .3s;
}

.test {
  height: 120px;
  position: fixed;
}

and my jQuery is -

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 10){      
    $('.header').addClass("test");
  } 
  else{
    $('.header').removeClass("test");
  }
});

the problem I have is when I scroll the content in the jumps up behind the and I can't see it. I can't work out what my HTML/CSS is doing wrong here.

Any ideas?

EDIT:

here's a little jsfiddle with the code in it - http://jsfiddle.net/rHmCu/

回答1:

The section has no defined position so it gets behind the .header so:

section { 
    position:relative;
}

( I suppose )

DEMO:http://jsfiddle.net/pavloschris/rHmCu/3/

回答2:

Your css

.test {
  height: 120px;
  position: fixed;
}

will cause all content to go underneathe it, since it is position fixed, if you want to avoid the jump and have the header dock, then you need to dynamically add a margin top to the element right after your header

Something like this

$(window).scroll(function(){ 
  var $header = $('.header');
  if ($(this).scrollTop() > 10){      
    if(!$header.hasClass('test')) {
        $header.addClass("test");
        $header.next().css('margin-top','120px');
    }
  } 
  else{
    if($header.hasClass('test')) {
        $header.removeClass("test");
        $header.next().css('margin-top','0');
    }
  }
});

I have not tested this code but it's something like that, of course you could also get the height dynamically if needed.

I also added the checking for the class test because you don't need to do extra work if the class is already there. Just a note, since you are doing this on scroll, it is possible this cause stuttering on tablet/phones

It would help if you put it in a fiddle or at least state the final goal. My answer is assuming you want a dockable header and to avoid the jump when the header docks

回答3:

header is an element, but both your CSS and your jQuery selectors try to access it as a class. Remove the dot in the selectors.

回答4:

I wrote a plugin that pins and element and allows a callback when it reaches thresholds... http://drewdahlman.github.com/Pinned/

$("#element").pinned({
    bounds: 100, // when to become sticky
    scrolling: 0, // position during scroll
    mobile: false // should support mobile 
},function(){
    // PINNED
    // SHRINK YOUR ELEMENT
},
function(){
    // UNPINNED
    // EXPAND YOUR ELEMENT
});

This will trigger when you scroll 100px down but can be set to 1 and should do the trick.

Also from your fiddle - set your header to position absolute and then when the change happens your content wont jump around. because you've positioned it already to account for the size and placement of your header.

回答5:

I managed to hack around some of the answers here and it's resulted in this fiddle -

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 0){  
    $('header').addClass("test");
    $('section').css("padding-top", "220px");
  } 
  else{
    $('header').removeClass("test");
    $('section').css("padding-top", "0px");
  }
});

http://jsfiddle.net/rHmCu/5/

Thanks so much for everyone who's taken the time to answer and get my brain working on this

回答6:

A very simple solution with just html and css:

have header and small-header both within the body element
let body create a new stacking index with e.g. z-index: 0
small-header gets position: fixed and z-index: 1
header gets position: relative and z-index: 2

This places the (big) header in front and it will still scroll and leave the viewport.

The smaller header is behind but still in front of the content (z-wise).

Header and content scroll together while the fixed small-header inbetween stays in place. It can be that simple.

回答7:

You can try this simple stuff for resizing header on scroll window.

$(document).on("scroll", function(){
		if
      ($(document).scrollTop() > 100){
		  $("header").addClass("shrink");
		}
		else
		{
			$("header").removeClass("shrink");
		}
	});

body {
  background: #eee;
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
  color: #333;
}

header {
  width: 100%;
  padding: 30px 0;
  background: #000;
  border-bottom: 1px solid #e1e1e1;
  /* animation magic */
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
  color:#aaa;
}

header h1 {
  font-size: 30px;
  text-indent: 40px;
  font-weight: bold;
}

.container {
  width: 90%;
  margin: 180px auto;
}

.shrink {
  padding: 10px 0;
}

p {
  margin: 0 0 40px 0;
  line-height: 24px;
}

strong {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <h1>LOGO</h1>
</header>
  
<section class="container">
  <p><strong>Scroll down to see the magic in action...</strong></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
  
<p>
Sed nulla cred Banksy jean shorts. Reprehenderit mumblecore incididunt anim accusamus. Keffiyeh Cosby sweater in cornhole elit, tote bag cillum banjo. Shabby chic YOLO banh mi sunt. Artisan blog Neutra, polaroid adipisicing Banksy +1 lo-fi umami distillery fixie seitan. Semiotics artisan flannel mollit craft beer Blue Bottle. Bespoke biodiesel banh mi literally.
</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

回答8:

You need to add top: 0; left: 0; rules to `.test' class. It will fix your Navbar into the top of the webpage.

来源：https://stackoverflow.com/questions/15552728/resize-header-on-scroll

标签

jquery

css

scroll

addclass

scrolltop