1

Tengo un navbar el cual se coloca detras del contenido al hacer scroll, quiero colocar un navbar sticky, pero, se superpone el contenido...

Intenté colocando 10rem, pero tampoco me funciona; no entiendo qué podría realizar para solucionar este tema, he buscado pero no encuentro solución.

introducir la descripción de la imagen aquí

 <div id="app">
        <div id="navbar">
            <nav class="navbar navbar-expand-md shadow-sm nav">
                <div class="container">
                    <a class="navbar-brand" href="{{ url('/home') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <!-- Left Side Of Navbar -->
                        <ul class="navbar-nav me-auto">
    
                        </ul>
    
                        <!-- Right Side Of Navbar -->
                        <ul class="navbar-nav ms-auto">
                            <!-- Authentication Links -->
                            @guest
                                @if (Route::has('login'))
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                    </li>
                                @endif
    
                                @if (Route::has('register'))
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                    </li>
                                @endif
                            @else
                                <li class="nav-item dropdown">
                                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                        {{ Auth::user()->name }}
                                    </a>
    
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                         document.getElementById('logout-form').submit();">
                                            {{ __('Logout') }}
                                        </a>
    
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                        Asistencia
                                    </a>
    
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="{{ route('users.index') }}">
                                            {{ __('Usuarios') }}
                                        </a>
    
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </div>
                                </li>
                            @endguest
                        </ul>
                    </div>
                </div>
            </nav>

Ese es el contenido del navbar y este es el css que tengo añadido

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

Junto con el Script

        window.onscroll = function() {
            myFunction()
        };

        var navbar = document.getElementById("navbar");

        var sticky = navbar.offsetTop;

        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }
0

1 respuesta 1

4

Cuando usas posiciones absolutas o fixed debes usar la propiedad z-index para superponerlo a otros elementos.

Por ejemplo:

.box-container {
  position: relative;
}
.box {
  width: 150px;
  height: 150px;
  background-color: red;
}
.box:first-child {
  background-color: pink;
}
.box:nth-child(2){
  position: absolute;
  top: 0;
  left: 75px;
  z-index: 999;
}
<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>

Aquí la propiedad z-index: 999; posiciona el elemento por encima de los demás elementos.

.box-container {
  position: relative;
}
.box {
  width: 150px;
  height: 150px;
  background-color: red;
}
.box:first-child {
  background-color: pink;
}
.box:nth-child(2){
  position: absolute;
  top: 0;
  left: 75px;
  z-index: -1;
}
<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
 </div>

Mientras que z-index: -1; lo posiciona por detrás de todos los objetos.

De esa forma puedes ir jugando con la propiedad z-index para posicionarlo en el DOM según la posición requerida.

1
  • Muchas Gracias!! <3 el 11 ago. 2022 a las 17:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.