当前位置：文江博客话题详情

CSS-单页面网页顶部变化效果是怎么实现的？

发布于 2017-05-25 13:22:34 字数 109 浏览 1033 评论 1

就是类似于google这个页面的顶部效果
http://www.google.com/design/spec/resources/layout-templates.html

谢谢

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

想挽留 2017-08-24 20:07:03

我是用Jquery的scroll事件做出来的。
为了给题主写例子，我定义了5个块。第一个块是头部，第二个块是下面的内容。
头部又包含了三个小块，一个放左边的那个图标，一个放下面的Resource，一个放滚动鼠标后显示的内容ResourcesLayout > Templates。
然后，主要代码是：

$(document).ready(function(){
$(window).scroll(function(){
var tmp=$(window).scrollTop();
if(tmp>200){
$('.d1').css('height','60px');
$('.d1_3').text('ResourcesLayout > Templates');
$('.d1_2').hide();
}
if(tmp==60){
$('.d1').css('height','200px');
$('.d1_3').text('');
$('.d1_2').show();
}
if(tmp<200&&tmp>60){
var tmph=200-tmp+'px';
$('.d1').css('height',tmph);
$('.d1_3').text('');
$('.d1_2').show();
}

})
})

判断scrollTop的大小，与头部块的大小作比较。然后再动态改变头部块的高度。
全部的代码在下面。你要用的话还得下载一个jquery.js的文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../style/jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.d1{
position: fixed;
top: 0px;
left: 0px;
height: 200px;
width: 100%;
background:#343434;
overflow:hidden;
z-index: 11;
}
.d1_1{
position: absolute;
left: 20px;
top: 10px;
width: auto;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #fff;
}
.d1_2{
position: absolute;
left: 80px;
bottom: 20px;
font-size: 34px;
color: #fff;
}
.d1_3{
position: absolute;
left: 80px;
top: 10px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #fff;
}
.content{
position: absolute;
top: 220px;
left: 0px;
width: 100%;
height: auto;

}
</style>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var tmp=$(window).scrollTop();
if(tmp>200){
$('.d1').css('height','60px');
$('.d1_3').text('ResourcesLayout > Templates');
$('.d1_2').hide();
}
if(tmp==60){
$('.d1').css('height','200px');
$('.d1_3').text('');
$('.d1_2').show();
}
if(tmp<200&&tmp>60){
var tmph=200-tmp+'px';
$('.d1').css('height',tmph);
$('.d1_3').text('');
$('.d1_2').show();
}