[AppBar] Sticky

[StokeMasterJack]

It would be cool if version 1 supports sticky app bar, like this one:

https://www.muicss.com/docs/v1/example-layouts/blog

[philipodev]

This is not a feature, its rather a css thing.

This creates exactly the same behavior as proposed by setting the AppBar style to position: fixed.

import React, { Component } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>

        <div>
          <AppBar style={{ position: "fixed" }} />
          <div style={{ paddingTop: 64 }}>content</div>
        </div>

      </MuiThemeProvider>
    );
  }
}

export default App;

[StokeMasterJack]

I'm sure it is a css thing. But that does not mean it shouldn't be a feature.

I just created an entire web app using material-ui and it looks amazing. And I barely used any css. That's because material-ui does all of the css for me. One of the defining things about web ui components (in my mind) is the encapsulation of the CSS.

So the fact that something is a "css thing" doesn't mean it shouldn't be a feature of material-ui.

Secondly, I don't think it's as simple adding position: "fixed". See this discussion for details:

#1792 (comment)

[kgregory]

This is the AppBar's behavior in the next branch.

[oliviertassinari]

We now have 3 positioning strategies with the next branch, thanks to #7049:

• fixed (default)
• static
• absolute

[ghost]

So there is no way to do it yet???

[oliviertassinari]

@BravenxX Sticky was added 3 years ago: #10090.