Html Question posted in
Some basic documentation can be found here.

Html – Scrolling down on a sticky header menu on mobile

I want to create a standard header bar for my website. That header should always be displayed on top of the window regardless of how far I scroll down on the page. I used position:sticky. So, pretty standard stuff.

My header has a single menu button. When clicked, the detailed menu that takes the whole screen width appears. That menu is part of the header div and therefore also has the position:sticky property.

Here’s an illustration of what I’m trying to do (not the exact code because it would be too heavy).

$(".t3-menu").on("click",function(){
    $(".t3-dropdown").toggle();
  }
);
    .t3-entete {
       position: sticky; /* I also tried fixed and absolute to no avail*/
       top: 0px;
       left: 0px;
       width: 100%;
       z-index: 10;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="t3-container">
  <div class="t3-entete">
  <button class="t3-menu">Menu</button>
    <div class="t3-dropdown">
     <ul>
        <li>A</li>
        <li>very</li>
        <li>very</li>
        <li>very</li>
        <li>very</li>
        <li>long</li>
        <li>list</li>
        <li>of</li>
        <li>menu</li>
        <li>items</li>
        <li>that</li>
        <li>don't</li>
        <li>fit</li>
        <li>on</li>
        <li>a</li>
        <li>single</li>
        <li>mobile</li>
        <li>screen</li>
        <li>and</li>
        <li>that</li>
        <li>need</li>
        <li>to</li>
        <li>be</li>
        <li>scrolled</li>
        <li>down</li>
     </ul>
    </div>
  </div>
  <div class="t3-content">
    <p>Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus. Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.</p>
    
    <p>Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus. Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.</p>
    
    <p>Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus. Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.</p>
  </div>
</div>

It works well on desktop. My problem is on phones: the menu is too big to be fully displayed on screen but I can’t scroll down to access the rest. I assume that this is a side effect of the sticky property.

I tried using position:fixed instead of position:sticky but the problem remains the same. I also looked at other websites with the same menu layout as I want but I don’t understand how they did it.

How can I make the menu scrollable while still maintaing the sticky header and without losing the position of my scrolling when I access the menu? Do I have to use JS to store the current vertical-axis position and get back there after the menu closes?

Tags:

2

Answers


  1. 0

    If I imagine this situation correctly, then you need to make the dropdown menu higher in z-context than its surroundings.
    To achieve this, I would try making the dropdown menu itself position: absolute and with a higher z-index. You also need to make a z-index for the container so that the contexts work correctly.

    If I have misunderstood your problem, please attach the code for your layout.

    Login or Signup to reply.
  2. 0

    If you want it to be scrollable AND fixed, you will need to set a max-height. Otherwise it will simply overflow the viewport, and it’s not possible to scroll the viewport to scroll the list, because it’s stuck to the viewport you’re trying to scroll with it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search