JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="header1">header 1 </div>
<div class="row">
<div class="cell-left">
<div>
links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>
</div>
</div>
<div class="cell-right">
content rechts
</div>
</div>
<div id="footer">
<div class="footertext">
footer
</div>
</div>
</div>
CSS
/* lay-out */
html, body {
height:100%;
margin: 0;
padding: 0;
color:#000000;
font-size:11pt;
FONT-FAMILY: Arial,verdana;
text-decoration : none;
line-height: 19px;
}
#wrapper {
height:100%;
width:995px;
display:table;
margin-left:auto;
margin-right:auto;
}
#header1 {
display:table-row;
width:995px;
height:100px;
background-color: #CC00FF;
}
#footer {
display:table-row;
width:995px;
height:600px;
background-color: #FF6666;
}
.footertext {
float: left !important;
margin: 7px 0px 0px 10px;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
.row {
height:100%;
display:table-row;
background-color: #FF9999;
}
.cell-right {
display:table-cell;
float: right;
width:500px;
padding-right:10px;
background-color: #3300CC;
}
.cell-left {
float: left;
width:245px;
min-height: 100%;
padding-left:10px;
padding-top:0px;
}
JavaScript
// linker menu
$(function() {
var sticky = jQuery('.cell-left').offset().top;
console.log(sticky);
jQuery(window).scroll(function(){ // scroll event
var windowTop = jQuery(window).scrollTop();
console.log(windowTop);
if (sticky < windowTop) {
jQuery('.cell-left').css({ position: 'fixed', top: 0 });
}
else {
jQuery('.cell-left').css('position','static');
}
});
});