CODEWITHSUNDEEP
cssmobilescrollfrontend
menberusch
menberusch

Reputation: 21

Blank space under menu after scrolling on mobile devices

I have position fixed menu element which is hiding whenever you click/touch on darken area. And the problem is that whenever you are scrolling website this blank space appears under menu before it hides

screenshot with issue:
screenshot with issue.

I tried to add more height to menu element and setting overflow: hidden to disable scrolling when menu is active but it didn't help. Also i tried to search about this but it's really hard for me to formulate accurate question with words to find some related answers or tips.

Upvotes: 1

Views: 1186

Answers (2)

menberusch
menberusch

Reputation: 21

I figured out how actually position: fixed is working, and came up with idea how can i solve my issue. So basically, on touch devices position fixed is working only in one way(for example: if you set top: 0 and bottom: auto(or top: 0 and bottom: 0), there will be an empty space at bottom before menu hides, and if you set bottom: 0 and top: auto there will be opposite effect). So i came up with idea to create another layer with same bg-color and same animation effects but with bottom: 0 and top: auto for preventing this blank space on top/bottom side of the menu. So basically, yea, it did solve my issue. Maybe someone is facing same, so i decided to write down this answer.

Upvotes: 1

ohfierce
ohfierce

Reputation: 1

thanks to @eisbehr for teaching me how to use this and a well learned lesson, I removed my previous answer.

body {
  margin: 0;
}
.forceHeight {
  position: relative;
  height: 200vh;
  background-color: lightgrey;
}

.menu {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}
<div class="forceHeight">
  <div class="menu">
    this is your fixed menu
  </div>
  asdf this has a lot of content
</div>

Upvotes: 0

Related Questions