Javascript 使用HTML、CSS和；JS创建一个在滚动时收缩的固定标题_Javascript_Html_Css_Animation_Header

Javascript 使用HTML、CSS和；JS创建一个在滚动时收缩的固定标题

javascript html css animation

Javascript 使用HTML、CSS和；JS创建一个在滚动时收缩的固定标题,javascript,html,css,animation,header,Javascript,Html,Css,Animation,Header,我正在尝试复制此网站上的工作：但它失败了，我无法让javascript按预期工作。我正在使用嵌入式javascript，并将在下面发布所有代码。预期的结果是在超链接页面上，您可以看到一旦用户向下滚动页面，标题的大小将如何缩小 @导入指南针； @字体{ 字体系列：“Bruss”； src:url（'bruss-webfont.eot'）； src:url（'bruss-webfont.eot？#iefix'）格式（'embedded-opentype'）， url（'bruss-webfon

我正在尝试复制此网站上的工作：

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

@导入指南针；
@字体{
字体系列：“Bruss”；
src:url（'bruss-webfont.eot'）；
src:url（'bruss-webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'bruss-webfont.woff2'）格式（'woff2'），
url（'bruss-webfont.woff'）格式（'woff'），
url（'bruss-webfont.ttf'）格式（'truetype'），
url（'bruss-webfont.svg#bruss'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
身体{
背景色：#1d3558；
}
h1{
字体系列：Bruss；
字号：4em；
颜色：#D3；
文本对齐：居中；
}
身体{
背景：#eee；
保证金：0；
填充：0；
字体系列：“源Sans-Pro”，无衬线；
颜色：#333；
}
标题{
宽度：100%；
填充：10px0；
背景：#fff；
/*动画魔术*/
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
z指数：9999；
排名：0；
位置：固定；
}
收割台h1{
字体大小：30px；
文本缩进：40px；
字体大小：粗体；
}
.集装箱{
宽度：40%；
保证金：180px自动；
}
.收缩{
填充：20px0；
}
p{
利润率：0.40px0；
线高：24px；
}
强壮的{
字体大小：粗体；
}


测试示例
$（文档）.on（“滚动”，函数（）{
如果
（$（文档）.scrollTop（）>100）{
$（“标题”）.addClass（“收缩”）；
updateSliderMargin（）；
}
其他的
{
$（“标题”）.removeClass（“收缩”）；
updateSliderMargin（）；
}
});
测试示例

试试下面的方法

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

希望这对您有所帮助。

您可以使用jquery向滚动导航添加一个类，如下所示：

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

我用li元素的填充设置导航的高度。当用户从顶部滚动80px时，我向nav添加了一个“nav shrink”类，并使用新类减少nav的li元素上的填充。确保在li元素上使用css ease transition，以在高度更改上获得缓和效果。

确定，以便页眉具有css transition属性

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

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

$(document).on("scroll", function(){ if ($(document).scrollTop() > 100) { $("header").addClass("shrink"); } else { $("header").removeClass("shrink"); } });
类被交换，并且由于头部中的CSS转换属性，填充中的更改被设置为动画
现在让我们来谈谈有趣的事情，我为您创建了一个工作示例，没有任何额外的内容。
（请原谅我的“假内容”需要一些“内容”来滚动）

*{边距：0；填充：0；} .标题{宽度：100%；高度：20px；位置：固定；顶部：0；填充：40px 0；背景色：#ff0；过渡：所有0.4s易于输入输出；线条高度：20px；} .shrink{padding:10px 0} jQuery（文档）.ready（函数（）{ $（文档）.on（“滚动”，函数（）{ 如果（$（文档）.scrollTop（）>100）{ $（“.header”）.addClass（“收缩”）； }否则{ $（“.header”）.removeClass（“收缩”）； } }); }); 是我！洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆洛雷姆·洛雷姆

<!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 lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </div> </body> </html>