There is a sticky menu that follows the header block (header has a fixed height). The problem is that the content going right away, at the start of the scroll, is partially hidden under the menu itself. How can this be overcome? I tried adding both padding and margin, all to no avail. Menu jquery code:

$(window).scroll(function(){ if ($(window).scrollTop()>$("header").height()-$("my-nav").height()){ $(".my-nav").addClass("stickly"); } else { $(".my-nav").removeClass("stickly"); } });

Here is the project

  • one
    It is necessary to add to the html margin-top, which frame is the height of the sticky menu. - NeedHate
  • to html? What is it like? - sagan
  • one
    Simply to the <html> tag, zip up the style or class in which this margin-top will be set. - NeedHate
  • Well, and it will also be displayed on the page (the indent appears at the top) - sagan
  • will not appear .... it will be blocked by a fixed element. - NeedHate

1 answer 1

As an example, I didn’t particularly stylize it, but the gray block perfectly sticks to the ceiling while the content does not jump. Link to codepen . And the code itself:

 var distance = $('h1').offset().top, heightTitle = $('h1').outerHeight(true) $window = $(window); $window.scroll(function() { if ( $window.scrollTop() >= distance ) { $('h1').addClass('sticked') $('html').css('margin-top', heightTitle) } else { $('h1').removeClass('sticked') $('html').css('margin-top', '0') } });