Question

我正在尝试设计一个具有不同“条纹”的页面。我希望第一个div是全屏，然后当用户点击一个按钮时，它会向下滚动到另一个全屏显示的div。

许多网站正在这样做，我想知道如何。

这就是我到目前为止所做的：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();

Answer 1

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; 
}

全屏条纹设计

1 个答案: