Robi ci to skrypt umieszczony na stronie:
function sticktothetop() {
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
if (window_top > top) {
$('#stickThis').addClass('stick');
$('#stick-here').height($('#stickThis').outerHeight());
} else {
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function () {
$(window).scroll(sticktothetop);
sticktothetop();
});
A konkretniej przełączanie klas $('#stickThis').addClass('stick');
.
Zmniejszanie szerokości menu jest pochodną umieszczenia w klasie #stickThis.stick {
właściwości position: fixed;
Co wynika z faktu, że w ten sposób wyrywasz element z kontekstu jego oryginalnego rodzica i umieszczasz na stronie jako niezależny.
Rozwiązaniem powinno być każdorazowe odczytanie szerokości elementu <div class="tableBox">
i zaaplikowanie jej do <div id="stickThis">