I want to ensure that when scrolling, for example, on 100px from above, the #nav block #nav fixed, or rather the .fixed class is .fixed . Well, and vice versa, if the scroll is less than 100px on top, before we remove the class.

I kind of found a solution, but it is not quite right. Help pliz)

    2 answers 2

    jQuery:

     $(window).scroll(function() { var block_btn = $(".b_fix"); var offset = block_btn.offset(); if(offset.top <= 30){ $("#nav").removeClass('nav_fixed'); } else { $("#nav").addClass('nav_fixed'); } });

    CSS:

     .b_fix{ height: 1px; background: transparent; position: fixed; top: 0;}

    HTML:

     <div class="b_fix"></div>

    Be sure to add an empty block to the page.

    Eh, I like to answer my own questions :)

    • And what about block_btn? - user22245
    • ahah, the meaning of an empty block, you can simply indent a little more trouble less at the top - LinuX_UseR
    • I asked it myself and answered, “Th is the karma of the standards that you get - LinuX_UseR
    • 3
      @LinuX_UseR for karma I do not masturbate ... well, you understand. Found a solution. Since no one answered, why not help others and not share it, rather than close or delete the question? - inferusvv

    Something like that:

     jQuery(window).scroll(function() { var the_top = jQuery(document).scrollTop(); if (the_top > 100) { jQuery('#nav').addClass('fixed'); } else { jQuery('#nav').removeClass('fixed'); } });
    • and how to be to keep the fixed block when you refresh the page? because in the code above the block becomes fixed only when the scrolling event occurs - Vladimir Vasilev