使用 HTML、CSS 和 JS 创建一个固定的 header，滚动时会缩小

Question

我正在尝试从该站点复制作品：

但它失败了，我无法让 javascript 按预期工作。我正在使用嵌入式 javascript 并将 post 下面的所有代码。预期的结果在超链接页面上，您可以看到一旦用户向下滚动页面，header 应该如何缩小大小。

@import compass;


@font-face {
    font-family: 'Bruss';
    src: url('bruss-webfont.eot');
    src: url('bruss-webfont.eot?#iefix') format('embedded-opentype'),
         url('bruss-webfont.woff2') format('woff2'),
         url('bruss-webfont.woff') format('woff'),
         url('bruss-webfont.ttf') format('truetype'),
         url('bruss-webfont.svg#Bruss') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
 background-color: #1d3558; 

}

h1 {
   font-family: Bruss;
   font-size: 4em;
   color: #d3d3d3;
   text-align: center;

}

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

header {
  width: 100%;
  padding: 10px 0;
  background: #fff;
  /* animation magic */
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
}

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

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

.shrink {
  padding: 20px 0;
}

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

strong {
  font-weight: bold;
}

<!DOCTYPE html>

<!-- 
 Sunday, 31st January 2016. | v . 01
-->

<html>
 <head>

 <title>Test example</title>
 <link rel="stylesheet" href="styling.css"/>
 <script>
  $(document).on("scroll", function(){
  if
      ($(document).scrollTop() > 100){
    $("header").addClass("shrink");
   updateSliderMargin();
  }
  else
  {
   $("header").removeClass("shrink");
   updateSliderMargin();
  }
 });
 </script>

 </head>

 <body>
 <header>
 <h1>
  Test example
      </h1>
 </header>




 </body>
</html>

感谢您抽出宝贵时间，您可能会从糟糕的缩进和其他不良做法中看出我是新手，因此欢迎就如何使代码更健壮提出任何一般性意见。

Answer 1

试试

$(window).scroll(function () {
      if ($(window).scrollTop() > 100) {
           //animate(css property,time,callback)
           $('header').animate({'padding':'20px 0'},1000,function(){      
             //callback animation
             //If you need you can add more animations here, like a chained animation
             console.log('End');
           }); 
       }else{
          $('header').animate({'padding':'0'},1000); 
      }
   });

希望对你有所帮助。

Answer 2

您可以使用 jquery 将 class 添加到滚动导航，如下所示：

$(window).scroll(function() {  
var scroll = $(this).scrollTop();
if (scroll > 80) {
    $('nav').addClass('nav-shrink');
} else {    
   $('nav').removeClass('nav-shrink');
}
});

https://jsfiddle.net/jxqt8qqu/

我用我的 li 元素的内边距设置了导航的高度。当用户从顶部滚动 80px 时，我将 "nav-shrink" 的 class 添加到导航，并使用新的 class 减少导航的 li 元素上的填充。请务必在 li 元素上使用 css 缓动过渡以获得高度变化的缓动效果。

Answer 3

好的 header 有 CSS 转换属性

/* animation magic */
  -webkit-transition: all 0.4s ease-in-out
  -moz-transition: all 0.4s ease-in-out

还有两个类.shrink和.header，在.header 顶部和底部的填充设置为 60px，在 .shrink 中，顶部和底部的填充设置为 20px。
使用 jQuery 检测 window 的滚动级别

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

类被交换，并且由于 header 中的 CSS 过渡属性，填充的变化是动画的。

现在开始有趣的事情，我已经为您创建了一个没有所有额外内容的工作示例。
（请原谅我 "fake content" 需要一些 "content" 来滚动）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    * {margin:0;padding:0;}
    .header {width:100%;height:20px;position:fixed;top:0;padding:40px 0;background-color:#ff0;transition:all 0.4s ease-in-out;line-height:20px;}
    .shrink {padding:10px 0}
  </style>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function() {
       $(document).on("scroll", function(){
        if ($(document).scrollTop() > 100) {
          $(".header").addClass("shrink");
        } else {
          $(".header").removeClass("shrink");
        }
      });
    });
  </script>
</head>
<body>
  <header class="header">
    It's Me!
  </header>
  <div class="fake-content">
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
    lorem lorem<br />lorem lorem<br />lorem lorem<br />
  </div>
</body>
</html>

使用 HTML、CSS 和 JS 创建一个固定的 header，滚动时会缩小

Using HTML, CSS & JS to create a fixed header that shrinks on scroll

html

javascript

css

animation

header