我正在尝试设计一个带有不同“条纹”的页面。我希望第一个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();

最佳答案

http://jsfiddle.net/d7tdK/4/

的HTML

<div class='first-stripe stripe'>
<a href='#scroll'><button> Go down </button></a>
</div>
<div class='second-div stripe' id='scroll'>
    <div id='div1'></div>
    <div id='div2'></div>
    <div id='div3'></div>
    <div id='div4'></div>
</div>


的JavaScript

$('a[href^="#"]').click(function() {
    var the_id = $(this).attr("href");
    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
});

$(window).bind('resize', handleResize);

function handleResize(){
    $('.stripe').height($(window).height());
}


的CSS

.first-stripe{
width: 100%;
min-height:500px;
background: #ffe503;
border-bottom: 10px solid #2f3031;
-moz-box-sizing:    border-box;
-webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

.second-div{
    width: 100%;
    min-height:500px;
}

#div1 {
    width: 50%; height: 50%; float: left;
    background: #3174b8;
}
#div2 {
    width: 50%; height: 50%; float: left;background: #59c09f;
}
#div3 {
    width: 50%; height: 50%; float: left;background: black;
}
#div4 {
    width: 50%; height: 50%; float: left;background: red;
}

07-24 09:47
查看更多