所以问题是我的页脚（应该位于页面底部）移动到我固定标题下面的页面顶部。
这是我的代码：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Roboto:400,100,300,100italic,300italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</head>
<style>
h1 {
font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 56px; line-height: 56px; color: #555; letter-spacing: -2px;
}
h2 {
font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 24px; line-height: 1.3em; color: #5b6064; letter-spacing: -1px;
}
p {
font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8em; color: #5b6064; margin-bottom: 18px;
}
a {
font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.1875rem;
}
.header-cont {
width:100%;
position:fixed; left: 0%;
top:0px;
}
.header {
height:60px;
background-color:#ffffff;
border-width:1px;
border-bottom-style: solid;
border-color: #e0e0e0;
width:100%;
}
.logo{
float: left;
width: 300px;
height: 100%;
border-right-style: solid;
border-width:1px;
border-color: #e0e0e0;
background-image: url('hjhjhjk');
background-repeat: no-repeat;
background-position: center center;
}
.nav{
float: left;
width: 100px;
height: 100%;
border-right-style: solid;
border-width:1px;
border-color: #e0e0e0;
}
.login{
float: left;
width: 100px;
height: 100%;
border-right-style: solid;
border-width:1px;
border-color: #e0e0e0;
text-align: center;
}
.kob{
float: right;
width: 150px;
height: 59px;
border-style: solid;
border-width:1px;
border-color: #0099cc;
background-color: #00b6e7;
text-align: center;
}
a:link {
text-decoration: none;
color: #787a78;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
.container{
max-width: 900px;
margin: 0px auto;
}
.bullet{
margin: 60px auto;
max-width: 900px;
}
.leftimgbullet{
width: 50%;
float: left;
background-image: url('asdasd);
background-repeat: no-repeat;
height: 650px;
margin-top: 50px;
background-position: center center;
}
.righttxtbullet{
width: 50%;
float: left;
height: 200px;
margin-top: 0px;
}
.kob1{
float: left;
padding-right: 5px;
padding-left: 5px;
height: 59px;
border-style: solid;
border-width:1px;
border-color: #0099cc;
background-color: #00b6e7;
text-align: center;
}
.footer{
background-color: #f6f6f6;
width: 100%;
height: 150px;
}
</style>
<div class="header-cont">
<div class="header"><div class="logo"></div>
<div class="kob"><div style="margin-top: 18px;"><a style="color: #ffffff;" href="asdasdasd">asdasdasd</a></div></div></div>
</div>
<div class="container">
<div class="bullet">
<div class="leftimgbullet"></div>
<div class="righttxtbullet"><h1 style="margin-bottom: 24px;">why is the headline on top of the footer?</h1>
<h2 style="margin-bottom: 18px;">what is this?</h2>
<p>asdasdasdasd</p>
<div class="kob1"><div style="margin-top: 18px; padding-right: 10px; padding-left: 10px;"><a style="color: #ffffff;" href="sss.dk">crazt</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
<script>
$(function() {
var $sidebar = $(".header-cont"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
top: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
top: 0
});
}
});
});?
</script>
我不知道为什么页脚会粘在顶部，也许它是我的div设置？我不知道，我已经尝试了我所知道的一切。请帮助我，所有帮助表示赞赏。 所有帮助赞赏！谢谢！下面是代码笔：
http://codepen.io/jaxi123/pen/ydBHz