sticky header problem - suggestion - request

[homeza-freeart]

When scrolling the sticky header, disappearance and stuttering can be experienced. The problem is visible in the mobile view. It’s okay to scroll down, but when you scroll up, the sticky header disappears and only comes up when I move the display. This is very confusing. I suspect the problem is in main.js when switching the header to the stikcy header. add class and undo class. Anyway, I don't understand why I need to switch back and forth to css? Why can't I keep the header fixed in my place? I think it would make sense. I made the following small changes to the code. Its professionalism may not be adequate, but it has temporarily solved the problem! This way, the sticky header is fixed in place. no disappearance, lagging problem:

`jQuery(function ($) { /**

• Helix settings data

• */ var settings = Joomla.getOptions('data') || {};

  /**

• Device wise sticky header

• @param {string} className the header className */ var deviceWiseStickyHeader = function (className, offsetTop) { if ($('body:not(.layout-edit-iframe)').hasClass(className)) { var $header = $('#sp-header'); var headerHeight = $header.outerHeight(); var $stickyHeaderPlaceholder = $('.sticky-header-placeholder');

      var stickyHeader = function () {
          var scrollTop = $(window).scrollTop();
  
      /*  if (scrollTop >= offsetTop + 200) { */
          if (scrollTop >= offsetTop ) {
              $header.addClass('header-sticky');
              $stickyHeaderPlaceholder.height(headerHeight);
          } else {
              if ($header.hasClass('header-sticky')) {
                  /* $header.removeClass('header-sticky');
                  $stickyHeaderPlaceholder.height('inherit'); */
                  $stickyHeaderPlaceholder.height(headerHeight);
              }
          }
      };`

Is there a better and more professional solution to this?

[pavel-ww]

Hi. Yes I agree. The problem with sticky Header is still not solved. Using the animation along with offsetTop + 200 shifts the problem, but is not a solution. Previously, we needed to override CSS to correct the problem. Now it will be necessary to override JS. This is an even greater aggravation of the problem and increase the complexity for users. If you take these two options (offsettop and Header Animation) in the settings, it would solve the problem.

[yofiesetiawan]

From UX perspective, how about let it disappear on scroll down, but show when scroll up?

[homeza-freeart]

With the proliferation of 18: 9 aspect ratio mobiles, I don’t think it’s annoying if the header bar stays out on the screen all the time. However, it is important that it is always visible, as you need to be able to access the navigation at any time. I think if it disappears and then comes out, it’s a lot more confusing than if it’s always there. In the current state, however, the biggest problem is that while scrolling, it is uncertain whether this will occur when I just stop scrolling. Where yes, where no.

I like to choose an older but well-functioning solution for my customers that came from Helix3. https://www.deco-design.hu/ This is in main.js.

if ($("body.sticky-header").length > 0) {
        var fixedSection = $('#sp-header');
        // sticky nav
        var stickyNavTop = fixedSection.offset().top;
        fixedSection.addClass('animated');
        //add class
        fixedSection.addClass('menu-fixed-out');
        var stickyNav = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > stickyNavTop) {
                fixedSection.removeClass('menu-fixed-out').addClass('menu-fixed');
            } else {
                if (fixedSection.hasClass('menu-fixed')) {
                    fixedSection.removeClass('menu-fixed').addClass('menu-fixed-out');
                }
            }
        };
        stickyNav();
        $(window).scroll(function () {
            stickyNav();
        });
    }

Here I built a CSS with a + option where the header in the desktop view is reduced to 60px vertically and the logo also follows the resizing. Proven, customers love this solution.

[pavel-ww]

From UX perspective, how about let it disappear on scroll down, but show when scroll up?

This is a dubious opportunity, especially for mobile devices. I did that, but then gave up this solution. You can easily do it. www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

[mdamjadrana]

Header Sticky offset option added in backend and now default value is 0

[pavel-ww]

Hi @mdamjadrana. Header is almost good, but not perfect. It is still needs an animation disable button. When the offset is 0, there is no point in the animation.

There is also another small problem (in Header Style 1). When the Header switches to Sticky, TopBar is flicker under Header. This problem is caused by the fact that the call of Sticky-Header-Placeholder is located in the wrong place. It should always be before Header. Now it's before Top-Bar.

It should be here.

[joomleb]

Please, Was this fixed with the 2.0.2 release?

[FabienCCFR]

Please, Was this fixed with the 2.0.2 release?

Hi ! It seems not :-(

[homeza-freeart]

Unfortunately, the sticky header is still not good. It swims unnecessarily on the phone when I scroll the page. When scrolling down, it's still good, then when you scroll up, it disappears, and when I scroll down again, it comes back flashing, shaking. This is very confusing! Its operation is completely uncertain. :(

[panta7]

Same problem here with helix ultimate 2.0.5

[elmarra90]

Hi, I also found myself in the same problem. I have tried this buffer solution which seems to temporarily solve the problems. It is currently the only solution that seems to be solving, hoping that the developers will fix the problem soon Obviously always working on the file "main.js" and adding the css code:

css:

sp-header { animation: none !important;}

sp-header.header-sticky { position: fixed !important;}

edit to the js file: ` jQuery(function ($) {

// Stikcy Header
if ($('body').hasClass('sticky-header')) {
    var header = $('#sp-header');

    if($('#sp-header').length) {
        var headerHeight = header.outerHeight();
        var stickyHeaderTop = header.offset().top;
        var stickyHeader = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > stickyHeaderTop) {
                header.addClass('header-sticky');
            } else {
                if (header.hasClass('header-sticky')) {
                    header.removeClass('header-sticky');
                }
            }
        };
        stickyHeader();
        $(window).scroll(function () {
            stickyHeader();
        });
    }

    if ($('body').hasClass('layout-boxed')) {
        var windowWidth = header.parent().outerWidth();
        header.css({"max-width": windowWidth, "left": "auto"});
    }
}

;`

[mdamjadrana]

Issue solved check this