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

问题描述

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

I want to change the first header to be 100% page height and then using the javascript use this height to have the sticky header appear after the first header.

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

So I need to calculate the height of the page I think using jquery. Not sure how to implement it.

#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>

推荐答案

我能够将代码调整为以下内容：

I was able to adapt your code into the following: 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');
     });
});

和shiggles，看我玩这个

and for shiggles, watch me play this 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);
     });
});

这篇关于使用JQuery计算粘滞标头的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！