javascript - div position fixed re-size behaviour -
i have fixed menu on site works without issue. have container(not bootstrap) fixed when makes contact static menu. work expected except when re-size window container goes sort of absolute position 0 top. style or not mention explicitly, still has position:fixed
see this. tried of questions related problem in stackoverflow , other resources nothing gave me satisfying answer. 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"> menu </div> <div class="page-content"> page content <div> <div class="box-additional box-tabs grid12-12"> container </div>
jquery(newelement).css('margin-top', '-' + elementheight + 'px');
to
jquery(newelement).css('top', '-' + elementheight + 'px');
Comments
Post a Comment