div position fixed re-size behaviour

Question

I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top. The style or anything does not mention this explicitly, as it still has position:fixed but what I see is this. I tried most of the questions related to this problem in stackoverflow and other resources but nothing gave me a satisfying answer. Any help? Thanks.

 $.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> 

Answer 1

jQuery(newElement).css(' margin-top ', '-' + elementHeight + 'px');

to

jQuery(newElement).css(' top ', '-' + elementHeight + 'px');