使用JQuery计算粘贴标头的高度

Question

我想将第一个标题更改为100％页面高度，然后使用javascript使用此高度在第一个标题后显示粘性标题。

所以我需要使用jquery来计算我认为的页面高度。不知道如何实现它。

http://jsfiddle.net/obmerk99/VvKq3/1/

#header{
    width: 100%; background-color: red;
    border: 1px solid black;height:40px;}
#header_stick{
    width: 100%; background-color: black;
    border: 1px dotted grey;color:white;}
.stick{
    position:fixed;top:0;opacity:0.7;}
h1{
    font-size: 130%; padding-bottom:1px;}



 jQuery(window).scroll(function(){
    var top = jQuery(window).scrollTop();
if(top>42) // height of float header
jQuery('#header_stick').addClass('stick');
else
 jQuery('#header_stick').removeClass('stick');
    })



<div id="header">My floating header</div>
<div id="header_stick">My stick header</div>

Answer 1

我能够将您的代码调整为以下内容：Here's a fiddle

$(function() {
    var wH = $(window).height(),
        top;
    $("#header").css("height", wH);
    $(window).scroll(function(){
        top = jQuery(window).scrollTop();
        if(top>wH) // height of float header
            $('#header_stick').addClass('stick');
        else
          $('#header_stick').removeClass('stick');
     });
});

并且为了嘻嘻哈哈，请看我演这个fiddle。

$(function() {
    // cache vars
    var wH = $(window).height(),
        $stick = $("#header_stick"),
        isStick;

    // adjust 1st div height
    $("#header").css("height", wH);

    // sexier implementation with toggle
    $(window).scroll(function(){
        $stick.toggleClass('stick', jQuery(window).scrollTop() > wH);
     });
});