javascript - 固定顶部导航 + 使用 Jquery 的粘性页脚

Question

我在尝试同时使用固定顶部导航和粘性页脚时遇到问题，而不会将页脚隐藏在距底部 40 像素的位置。我正在使用的 jquery 脚本旨在解决此问题，但事实并非如此。我不能使用 Bootstrap 或类似的东西。所以这是我唯一的选择。

HTML

<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
    <li class="active"><a href="index.html">Home</a></li>

    <li class="has-sub"><a href="pages/courses.html">Courses</a>
        <ul>
            <li><a href="pages/courses/media.html"><span>Digital Media</span></a></li>
            <li><a href="pages/courses/webdev.html"><span>Web Development</span></a></li>
            <li><a href="pages/courses/journalism.html"><span>Journalism</span></a></li>
            <li class="last"><a href="pages/courses/infocomms.html"><span>Information & Communications</span></a></li>
        </ul>
    </li>
</ul>
<div id="wrapper">
    <header role="banner" id="banner">
        <div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
            <div class="content-a">
                <div class="content-b">
                    <h1>header1</h1>
                    <h2>header 2</h2>
                </div>
            </div>
        </div>
    </header>

    <div class="content">   


            <main role="main" id="skipnav">

                <p>Intro paragraph</p>




            </main>
    </div>
</div>
    <footer class="footer" id="footer">
        <div class="container2">
        <p>footer</p>
      </div>
    </footer>

</div>

Jquery 脚本 -

$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
    'padding-bottom' : footer_height
});
});

可以找到css here

可以找到完整的网站here

提前致谢。

Answer 1

不用jquery就可以只用css

#footer {
 bottom: 0;
 position: fixed;

}
nav {
  top : 0;
 position: fixed;

}