Sticky header issue on scroll

sticky header on scroll jquery
smooth sticky header on scroll jquery
bootstrap sticky header on scroll
animated sticky header on scroll codepen
sticky header css only
sticky header bootstrap
bootstrap 4 sticky header on scroll
sticky header codepen

I want to do sticky header on scroll for this I have written following code

var body = document.body;
var scrollUp = "scroll-up";
var scrollDown = "scroll-down";
var lastScroll = 0;

if (window.addEventListener) {
  window.addEventListener("scroll", scrollHandler);
} else {
  window.attachEvent("scroll", scrollHandler);
}

function scrollHandler() {
  var currentScroll = window.pageYOffset;
  if (currentScroll === 0) {
    body.classList.remove(scrollDown);
    body.classList.remove(scrollUp);
    return;
  }
  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    body.classList.remove(scrollUp);
    body.classList.add(scrollDown);
  } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
    // up
    body.classList.remove(scrollDown);
    body.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
}

Sticky header is working but its flickerring for some resolutions also It got stuck also sometime. Please help me in this. Thanks

you just need to select the nav element instead of body check the snippet the navbar will be fixed when you scroll up only

  var nav = document.getElementsByTagName('nav')[0];
        var scrollUp = "scroll-up";
        var scrollDown = "scroll-down";
        var lastScroll = 0;

        if (window.addEventListener) {
            window.addEventListener("scroll", scrollHandler);
        } else {
            window.attachEvent("scroll", scrollHandler);
        }

        function scrollHandler() {
            var currentScroll = window.pageYOffset;
            if (currentScroll === 0) {
                nav.classList.remove(scrollDown);
                nav.classList.remove(scrollUp);
                return;
            }
            if (currentScroll > lastScroll && !nav.classList.contains(scrollDown)) {
                // down
                nav.classList.remove(scrollUp);
                nav.classList.add(scrollDown);
            } else if (currentScroll < lastScroll && nav.classList.contains(scrollDown)) {
                // up
                nav.classList.remove(scrollDown);
                nav.classList.add(scrollUp);
            }
            lastScroll = currentScroll;
        }
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 2000px;
        }

        nav {
            width: 100%;
            height: 50px;
            background: royalblue;
        }

        .scroll-down {
            position: static;
            top: initial;
            left: initial;
        }

        .scroll-up {
            position: fixed;
            top: 0;
            left: 0;
        }
    <nav></nav>

How To Create an On Scroll Fixed Header, Page content */ .content { padding: 16px; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 102px;

I would recommend using sticky position attribute in CSS.

header {
  position: sticky;
  top: 0;
  background: gray;
}

main {
  min-height: 2000px;
}
<header>
  <h3>StickyHeader</h3>
</header>
<main>
  contents
</main>

How to Hide/Reveal a Sticky Header on Scroll (With JavaScript), Have you ever seen one of those fixed (or “sticky') header bars which disappear when you begin scrolling down the page, then reappear� Once you start to scroll, the header goes out of display area and the navigation menu becomes sticky and gets fixed on the page top. As you scroll up, it comes down and header appears again. It looks really great and is navigation friendly also. Today, we will learn how to create this cool sticky navigation menu effect with jQuery and CSS.

position sticky is not widely supported. you can try this approach without Javascript https://jsfiddle.net/59gd7a6e/1/

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                padding-top: 50px;
            }

            header {
                background: #efefef;
                height: 50px;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
            }

            section {
                height: 500px;
            }

            section:nth-of-type(2n) {
                background: #ffeda9;
            }
        </style>
    </head>
    <body>
    <header>
        This is the header
    </header>
    <section>
        section 1
    </section>
    <section>
        section 2
    </section>
    <section>
        section 3
    </section>
    </body>
    </html>

Simple sticky/fixed header that animates on scroll, Add or remove CSS class depending on scroll position If they have scrolled past 100px, we will add a CSS class called “sticky” to the header. If they are above 100px, we will remove the CSS class. Here's a start.Basically, we copy the header on load, and then check (using .scrollTop() or window.scrollY) to see when the user scrolls beyond a point (e.g. 200pixels).). Then we simply toggle a class (in this case .down) which moves the original into

Fixed sticky header when scrolling, </header>. 15. 16. <section class="content">. 17. <article>. 18. <p>Wolf vinyl hella, jean shorts disrupt skateboard master cleanse hashtag iPhone. Pop-up� The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page. Quick Steps on How to Add a Sticky Header or On-scroll Fixed Header with the Sticky Header Module Step 1: Make sure you have the Astra Pro Addon plugin installed and activated.

How to prevent anchor links from scrolling behind a sticky header , One problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu. You can� The second sets of tables were located under the “table header” with a min-height of 60vh. This made it appear that the header was sticky but it was just scrolling what looked like the “table rows”. Again I had to match the translation for the one sticky column on scroll just in the y-axis.

Jumpy sticky header on scroll, Hello, I tried to apply the same css from here: https://www.joomshaper.com/ forums/jumpy-scroll-with-sticky-header to fix my jumpy scroll issue� /* The sticky class is added to the navbar with JS when it reaches its scroll position */.sticky { position: fixed; top: 0; width: 100%;} /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */.sticky + .content