Question

我试图从这个网站复制这项工作：

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

@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在滚动中添加一个类来导航：

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

https://jsfiddle.net/jxqt8qqu/

我使用li元素的填充设置导航的高度。我添加了一个＆＃34; nav-shrink＆＃34;当用户从顶部滚动80px时导航到导航，并使用新类减少导航的li元素上的填充。一定要在li元素上使用css ease transition来获得高度变化的缓动效果。

Answer 3

确定标题具有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检测窗口的滚动级别

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

这些类是交换的，并且由于标题中的CSS转换属性，填充中的更改是动画的。

现在开始有趣的事情，我已经为你创造了一个工作范例，没有额外的内容（请原谅我＆＃34;虚假内容＆＃34;需要一些＆＃34;内容＆＃34;滚动）

<!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＆amp; JS创建一个在滚动时收缩的固定标题

3 个答案: