Question 258237 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how to fix sticky header and one page website scroll issue

my problem is menu click scroll up and sticky header under title hide

my problem is menu click scroll up and sticky header under title hide so please any advice
enter image description here
please check this image so more idea

Tags:

2

Answers


  1. 0

    It sounds like you have a menu that, when clicked, scrolls the page up, and you want to ensure that a sticky header remains hidden underneath the title during this scroll. Here’s some advice on how to achieve this:

    1. Sticky Header:

      • Ensure that you have implemented a sticky header correctly. A sticky header typically involves using CSS properties like position: sticky or JavaScript to add and remove classes for sticky behavior.

    2. Z-Index:

      • Make sure that your sticky header has a higher z-index than the title or any other elements that might overlap with it. This will ensure that the header remains on top of other content while scrolling.
      .sticky-header {
  position: sticky;
  top: 0;
  z-index: 100; /* Adjust this value as needed */
}

    3. Scroll Behavior:

      • Check if there is JavaScript code associated with the menu click that triggers the scroll. Ensure that it correctly scrolls to the desired position while taking the sticky header into account.
      // Example smooth scroll to an element with an ID "section-to-scroll"
document.getElementById('menu-item').addEventListener('click', function () {
  document.getElementById('section-to-scroll').scrollIntoView({ behavior: 'smooth' });
});

    4. Element Positioning:

      • Verify the positioning of your title or any other elements. Make sure they are not set to fixed or sticky if you want them to stay in place during scrolling.
      .title {
  position: relative; /* Or another appropriate position value */
}

    5. Debugging:

      • Use browser developer tools to inspect the elements as you scroll and click the menu. This will help you identify any CSS or layout issues that may be causing elements to overlap or behave unexpectedly.

    6. Scroll Event Handling:

      • If you’re using custom JavaScript for scrolling, ensure that you’re handling the scroll event properly. You can use event listeners to adjust the behavior of the sticky header as the user scrolls.
      window.addEventListener('scroll', function () {
  // Adjust header behavior here based on scroll position
});

    7. Testing on Different Devices and Browsers:

      • Ensure that you test your website on various devices and browsers to confirm that the sticky header remains hidden beneath the title as expected.

    By following these steps and making sure your header, scrolling behavior, and element positioning are properly configured, you should be able to achieve the desired effect of a menu-triggered scroll with a hidden sticky header underneath the title. If you encounter specific issues or have more detailed requirements, please provide additional information for more targeted guidance.

    Login or Signup to reply.
  2. 0

    Link : Try This One

     Js:

    $(function () {
      var $item = $('nav ul li');
    
      $item.on('click', 'a', function (event) {
        var $section = $($(this).attr('href'));
        var sectionTop = $section.offset().top;
    
        $('html, body').stop().animate({ scrollTop: sectionTop }, 1000);
    
        event.preventDefault();
      });
    
      $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
    
        $item.each(function () {
          var $section = $($(this).find('a').attr('href'));
          var sectionTop = $section.offset().top - 50;
          var sectionHeight = $section.height();
    
          if (sectionTop <= scrollTop && (sectionTop + sectionHeight) > scrollTop) {
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
          }
        });
      });
    });
    
    
    $(window).scroll(function () {
      var sticky = $('nav'),
        scroll = $(window).scrollTop();
    
      if (scroll >= 100) sticky.addClass('fixed-top');
      else sticky.removeClass('fixed-top');
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search