Sticky Menu Changing Color When Scrolling Down Without Jquery

I have a flexbox navigation menu in my angular 6 project , I want to change the background-color when the menu is sticky at the top . Here is what I would like to have [sample], Ex

Solution 1:

As Keno mentioned, the position: inherit in your media query is over riding position: sticky.

But using position: sticky only makes "sticky" relative to the parent not to the window according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/position)

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

For you to achieve the desired behavior the you should use position: fixed which is according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/position)

It is [the element] positioned relative to the initial containing block established by the viewport.

So your CSS should be

.main-nav-sticky {
   background-color: white;
}

.main-nav {
  margin-top: 100px;
  position: fixed;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  display: flex;
  height: auto;
  width: 100%;
  color: green;
}

And as for changing the color of the navbar when the user scrolls, you are going to need javascript to detect the scroll event and change the colors accordingly.

Solution 2:

You have a media query which is interfering with the positioning on smaller screens. It is sticky until it reaches the end of its parent container.

@mediaonly screen and (max-width: 768px) {
  .main-nav {
     margin: 0;
     display: block;
     /* position: inherit; This is the problem */
   }
}