Fixed resizing div position
I have a fixed menu on my site that works without any problem. I have a container (not bootstrap) that will snap on contact with a static menu. Everything works as expected except when I resize the window, the container goes to the absolute position with the 0 vertex. Style or something doesn't mention it explicitly as it still has position:fixed
, but I can see it. I tried most of the questions related to this issue on stackoverflow and other resources, but nothing gave me a satisfactory answer. Any help? Thank.
$.fn.extend({
scrollTabs: function() {
var pageTop = parseFloat($(window).scrollTop());
if (elementTop < pageTop + 66) {
$(this).css({
'position': 'fixed',
'top': '66px',
'left': '0',
'right': '0',
'z-index': '9999',
'background': '#ffffff',
'width': '100%',
'padding': '20px 0',
'margin-top': '0'
});
$(this).find('#product-tabs').css({
'max-width': '1300px',
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$(this).css({
'position': 'initial',
'margin-top': '-' + elementHeight + 'px'
});
}
}
});
$(window).load(function() {
var scrollElement = $('.box-additional.box-tabs.grid12-12');
elementTop = parseFloat($(scrollElement).offset().top);
var overflowHeight = parseFloat($(window).height()) - 200;
$('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
var scrollElement = $('#firstElement');
elementHeight = parseFloat($(scrollElement).outerHeight());
var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
var newElement = $('#newElement');
$(scrollElement).css('visibility', 'hidden');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(scrollElement).after(newElement);
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
$(window).resize(function() {
var scrollElement = $('#firstElement');
elementTop = parseFloat($(scrollElement).offset().top);
elementHeight = parseFloat($(scrollElement).outerHeight());
var newElement = $('#newElement');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
.header-container {
background-color: #000;
position: fixed;
width: 100%;
z-index: 99999;
color: #fff;
}
.grid12-12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
font-size: 50px;
}
.page-content {
min-height: 1000px;
float: left;
font-size: 72px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
this is my menu
</div>
<div class="page-content">
this is my page content
<div>
<div class="box-additional box-tabs grid12-12">
this is my container
</div>
+3
source to share