使用HTML，CSS和JS创建固定的标题，该标题在滚动时会缩小

Question

I am attempting to replicate the work from this site: 我正在尝试从此站点复制工作：

http://codepen.io/anon/pen/OMwWyj http://codepen.io/anon/pen/OMwWyj

But it is failing and I cannot get the javascript to work as intended. 但这失败了，我无法使javascript正常工作。 I am using embedded javascript and will post all code underneath. 我正在使用嵌入式JavaScript，并将在下面发布所有代码。 The expected outcome is on the hyperlinked page, you can see how the header is supposed to shrink in size once the user has scrolled down the page. 预期的结果在超链接页面上，您可以看到一旦用户向下滚动页面，标题应该如何缩小。

 @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>

Thanks for your time, as you can probably tell from poor indentation and other bad practice I am new to this, so any general comments on how to make code more robust is welcome. 谢谢您的宝贵时间，因为您可能会从缩进不良和其他不良做法中看出来，我对此并不陌生，因此欢迎就如何使代码更健壮发表任何一般性评论。

Answer 1

Try something like 尝试类似

$(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); 
      }
   });

Hope that helps you. 希望对您有帮助。

Answer 2

you could use jquery to add a class to nav on scroll like this: 您可以使用jquery在滚动时向导航添加一个类，如下所示：

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

https://jsfiddle.net/jxqt8qqu/ https://jsfiddle.net/jxqt8qqu/

I set the height of the nav with my li element's padding. 我用li元素的填充设置导航栏的高度。 I add a class of "nav-shrink" to the nav when user has scrolled 80px from the top, and decrease the padding on the nav's li element using the new class. 当用户从顶部滚动80px时，我向导航栏添加了一个“导航缩水”类，并使用新类减少了导航栏li元素的填充。 Be sure to use css ease transition on the li element to get the easing effect on the height change. 确保在li元素上使用css easy过渡以获得对高度变化的缓和效果。

Answer 3

OK so the header has the CSS transition property 确定，因此标头具有CSS Transition属性

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

And two classes .shrink and .header , in .header the padding top and bottom is set to 60px and in .shrink the padding top and bottom is set to 20px. .shrink和.header这两个类，在.header中 ，填充顶部和底部的填充设置为60px，在.shrink中 ，填充顶部和底部的填充设置为20px。
Using jQuery to detect the window's scroll level 使用jQuery检测窗口的滚动级别

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

the classes are swapped, and because of the CSS transition property in the header the change in the padding is animated. 这些类被交换，并且由于标头中的CSS transition属性，填充的变化是动态的。

Now on to the fun stuff, i've created a working example for you without all the extra content. 现在介绍有趣的东西，我为您创建了一个有效的示例，其中没有所有其他内容。
(do forgive me for the "fake content" needed some "content" to scroll) （请原谅我的“虚假内容”需要一些“内容”才能滚动）

<!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创建固定的标题，该标题在滚动时会缩小

问题描述

3 个解决方案

解决方案1
0 2016-02-01 23:32:36

解决方案2
0 2016-02-02 00:03:37

解决方案3
0 已采纳

使用HTML，CSS和JS创建固定的标题，该标题在滚动时会缩小

问题描述

3 个解决方案

解决方案1 0 2016-02-01 23:32:36

解决方案2 0 2016-02-02 00:03:37

解决方案3 0 已采纳

解决方案1
0 2016-02-01 23:32:36

解决方案2
0 2016-02-02 00:03:37

解决方案3
0 已采纳