html - que - sticky menu css

Overflow-x oculto causando un problema de posicionamiento en el menú de navegación responsivo (2)

Use la propiedad z-index para mostrar un elemento sobre otro.

El índice z más grande estará arriba de los otros.

Ejemplo: z-index: 2 se mostrará hasta z-index: 1.

Antecedentes de la pregunta:

Estoy usando Jasny Bootstrap para implementar un menú de estilo "revelado" offcanvas sensible.

La cuestión:

Cuando se abre el menú en un dispositivo móvil, el elemento de desplazamiento del menú no se habilita.

He envuelto la aplicación completa (donde se inyecta mi vista AngularJS) con un overflow-y:hidden estilo div overflow-y:hidden como se muestra:

<body ng-app="app"> <div style="overflow-x:hidden"> <div ui-view style="height:100%"> //View is injected here based on routing. </div> </div> </body>

Este estilo de desbordamiento significa que ahora puedo desplazar el menú en un dispositivo móvil, pero ahora tengo un problema donde y cuando el menú se desplaza hacia la parte superior, hay un espacio que muestra el menú que se muestra debajo:

Una vez que la página se desplaza ligeramente hacia abajo, la barra de navegación de respuesta muestra:

El código:

Lo siguiente es como se muestra arriba, Esta es la división principal de Vista donde se inyecta la página dependiendo de su enrutamiento:

<body ng-app="app"> <div style="overflow-x:hidden"> <div ui-view style="height:100%"> //View is injected here based on routing. </div> </div> </body>

Esta es la vista de resultados de la aplicación que contiene los elementos de la barra de navegación:

<div ng-controller="ResultsController" ng-show="hideSearch" style="height:100%"> <div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu"> <div class="text-center headerPad"><h3>Compzee <img src="Images/CompzeeLogoSmall.png" class="logoSize" /></h3></div> <div class="col-lg-12 pullInMenu"> <form ng-submit="search()" novalidate="novalidate"> <div class="form-group"> <label for="search">Search Term:</label> <input type="text" class="form-control" ng-model="item" id="itemUpdate" required> </div> <div class="form-group"> <label for="search">Product Category:</label> <select class="form-control" ng-model="catagory" required> <option value="" disabled selected>Select A Product Category</option> <option>All</option> <option>Baby</option> <option>Business, Office & Industrial</option> <option>Cameras & Photography</option> <option>Clothes & Accessories</option> <option>Comics, Books & Magazines</option> <option>Computers & Tablets</option> <option>Consoles</option> <option>DVD''s, Films & TV</option> <option>Garden & Patio</option> <option>Health & Beauty</option> <option>Holiday & Travel</option> <option>Home</option> <option>Kitchen</option> <option>Jewellery</option> <option>Mobile Phones & Accessories</option> <option>Musical Instruments</option> <option>Music</option> <option>Pet Supplies</option> <option>Shoes</option> <option>Sporting Goods</option> <option>Toys & Games</option> <option>Vehicle Parts & Accessories</option> <option>Video Games</option> <option>Watches</option> </select> </div> <div class="form-group"> <label for="search">Country:</label> <select class="form-control" ng-model="selectedCountry" required> <option value="" disabled selected>Select A Country</option> <option>UK</option> <option>US</option> <option>FR</option> <option>DE</option> </select> </div> <div class="form-group"> <div class="text-center"> <img ng-src="{{countryImg}}" /> </div> </div> <div class="form-group"> <label for="search">Marketplace</label> <select class="form-control" ng-model="selectedMarketPlace" required> <option value="" disabled selected>Select A Marketplace</option> <option>Ebay & Amazon</option> <option>Ebay</option> <option>Amazon</option> </select> </div> <div class="form-group"> <div class="text-center"> <img class="marketPlaces" ng-src="{{image}}" /> <img class="marketPlaces" ng-show=" showImg" ng-src="{{imageSecond}}" /> </div> </div> <div class="form-group"> <div class="content"> <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider> </div> </div> <div class="form-group"> <label for="search">Min Price</label> <input type="text" class="form-control" ng-model="minTextVal" id="slider-margin-value-min" readonly> </div> <div class="form-group"> <label for="search">Max Price</label> <input type="text" class="form-control" ng-model="maxTextVal" id="slider-margin-value-max" readonly> </div> <div class="form-group text-center"> <label for="search">Prices High To low</label> <input id="highToLowBox" type="radio" ng-value="true" ng-model="priceOrder"> </div> <div class="form-group text-center"> <label for="search">Prices Low To high</label> <input id="lowToHighBox" type="radio" ng-value="false" ng-model="priceOrder"> </div> <div class="form-group"> <button class="btn btn-success" ladda="searchingService.updating" type="submit" data-style="zoom-in" style="width:100%"> <span>Update</span> </button> </div> </form> </div> </div> <div class="canvas" id="resultsView"> <div class="navbar navbar-default navbar-fixed-top"> <button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="containerId" class="container"> <div class="topOffSet "> <div class="col-lg-12 text-center"> <div id="itemHolder"> <h4><b>{{searchingService.searchList.length}} Results found from your search criteria.</b></h4> <div class="panel panel-default col-lg-12 text-center" ng-show="searchingService.noResults"> <div class="panel-body"><img src="Images/CompzeeLogoSmall.png" class="logoSize" /><p>We could not find any results to match your search criteria</p><p>Please review your search terms and try again.</p></div> </div> <div ng-repeat="item in searchingService.filteredItems" class="col-lg-4"> <div class="panel panel-default maxPanelHeight"> <div class="panel-heading textOverflow" id="panelHeading"> <h3 class="panel-title text-center"><b>{{item.Title}}</b></h3> </div> <div class="panel-body"> <a href={{item.url}} target="_blank"><img src={{item.Image}} class="picHeight img-rounded img-responsive center-block" /></a> <h4 class="text-center"><b>{{item.Price}}</b></h4> <h4 class="text-center"><a href={{item.url}} class="btn btn-success" target="_blank">See More</a></h4> <div class="text-center"><img class="originPic" src={{item.marketPlaceImg}} /></div> </div> </div> </div> </div> </div> </div> <div class="col-lg-12 text-center"> <uib-pagination total-items="items.length" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false"> </uib-pagination> </div> </div> </div> </div>

Si tienes problemas con el índice z:

añadir el índice z: 1000; a la clase .navmenu.
si aún no se muestra en la parte superior, agregue z-index: 1; a la clase .canvas.
si aún no funciona, significa que está utilizando el índice z dentro de otras clases (etiquetas secundarias o principales de la clase .canvas o .navmenu). Para resolverlo necesitas eliminarlos. para buscarlo, simplemente busque en el índice z dentro de todo su proyecto para encontrar cuál causa el problema y luego intente los números 1 y 2 nuevamente. Tenga en cuenta los estilos en línea. No busque solo dentro de su archivo css. (No sé cuál es su IDE, pero si está utilizando Eclipse, simplemente presione CTRL + H y escriba z-index para buscar en todo el proyecto)
Si hizo 1,2 y 3 y aún no funciona, significa que almacenó en caché y necesita borrar su caché.

Si tienes un problema de altura:

Poner la altura: 100%; donde escribiste overflow-x: oculto. Altura 100% significa 100% de la altura de los padres. Cuando pones altura: 100% dentro de un nodo que es padre tiene 200px de altura. significa que la altura del nodo será de 200px y no más.