Home > database >  Why CSS Position Fixed Property doesn't work?
Why CSS Position Fixed Property doesn't work?

Time:09-23

I'm trying to let the navbar fixed so that when I scroll the navbar remains fixed. But actually, when I'm scrolling the navbar goes up and don't remain fixed. Please help me in this issue. I'm sharing my source codes what I'm trying.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
<body>
    <header>
      <ul>
        <li><a  href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

Here is the code. Now please let me know how to be fixed the header/navbar content so that when I scroll the header/navbar will remain fixed. Note: I'm just starting my HTML and CSS, so I may mistake a lot. Please give me proper explanation so that I can learn from your answer. Thanks Abdul Alim

CodePudding user response:

actually your code is correct but because this navbar is covered by an existing element that's why this navbar is behind the element body

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
  z-index: 99; /* you can add z-index dinavbar */
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
<body>
    <header>
      <ul>
        <li><a  href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

CodePudding user response:

Add z-index property for < ul >. Your header is fixed on top, but behind < main > when you scroll down just add z-index with high value.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
  z-index: 99;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
  <body>
    <header>
      <ul>
        <li><a  href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

CodePudding user response:

If you are trying to get the header "sticky" sticking while you scroll down, you need this.

https://www.w3schools.com/howto/howto_js_sticky_header.asp

  • Related