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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -