我正在尝试设计一个具有不同“条纹”的页面。我希望第一个 div 是全屏的,然后当用户单击一个按钮时,它会向下滚动到另一个全屏的 div。
这是一个网站作为示例:http ://timmytompkinsapp.com
很多网站都在这样做,我想知道如何。
这是我到目前为止所做的:http: //jsfiddle.net/d7tdK/
我的问题是我不知道如何使两条条纹的高度与窗口的高度相匹配。
我的 html :
<div class='first-stripe'>
<a href='#scroll'><button> Go down </button></a>
</div>
<div class='second-div' id='scroll'>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'></div>
</div>
我的CSS:
.first-stripe{
width: 100%;
height:500px;
background: yellow;
border-bottom: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.second-div{
width: 100%;
height:500px;
}
#div1 {
width: 50%; height: 50%; float: left;
background: blue;
}
#div2 {
width: 50%; height: 50%; float: left;background: green;
}
#div3 {
width: 50%; height: 50%; float: left;background: black;
}
#div4 {
width: 50%; height: 50%; float: left;background: red;
}
我的js:
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});
我的猜测是我应该为此使用脚本,但我不知道如何。
谢谢您的帮助 !
回答 :
我终于用了这个 JS:
$(function(){
$('.stripe').css({'height':(($(window).height()))});
$(window).resize(function(){
$('.stripe').css({'height':(($(window).height()))});
});
}); $(window).height();