Сбой переполнения-x, вызывающий проблемное навигационное меню

Вопрос:

Я использую Jasny Bootstrap, чтобы реализовать отзывчивое меню стиля "открыть".

Проблема:

Когда меню открыто на мобильном устройстве, элемент прокрутки меню не включается.

Я завернул все приложение (где мое AngularJS-представление было введено) с типом div overflow-y:hidden, как показано:

<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>

Это средство переполнения означает, что теперь я могу прокручивать меню на мобильном устройстве, но теперь у меня есть проблема, когда и когда меню прокручивается вверх, есть пробел, показывающий меню внизу, как показано ниже:

Когда страница немного прокручивается, реагирующая навигация показывает:

Код:

Ниже показано, как показано выше. Это основной вид Div, где страница вводится в зависимости от маршрутизации:

<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>

Это представление результатов приложения, содержащее элементы навигационной панели:

<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 &amp; Industrial</option>
                        <option>Cameras &amp; Photography</option>
                        <option>Clothes &amp; Accessories</option>
                        <option>Comics, Books &amp; Magazines</option>
                        <option>Computers &amp; Tablets</option>
                        <option>Consoles</option>
                        <option>DVD's, Films &amp; TV</option>
                        <option>Garden &amp; Patio</option>
                        <option>Health &amp; Beauty</option>
                        <option>Holiday &amp; Travel</option>
                        <option>Home</option>
                        <option>Kitchen</option>
                        <option>Jewellery</option>
                        <option>Mobile Phones &amp; Accessories</option>
                        <option>Musical Instruments</option>
                        <option>Music</option>
                        <option>Pet Supplies</option>
                        <option>Shoes</option>
                        <option>Sporting Goods</option>
                        <option>Toys &amp; Games</option>
                        <option>Vehicle Parts &amp; 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>

Ответ 1

Если у вас проблема с z-index:

добавить z-index: 1000; к классу .navmenu.
если все еще не показывать его сверху, добавьте z-index: 1; в класс .canvas.
если все еще не работает, значит, вы используете z-index внутри других классов (суб или родительские теги класса .canvas или .navmenu). для его решения вам нужно их удалить. для его поиска вы просто просматриваете z-index внутри всего вашего проекта, чтобы найти причину проблемы, а затем повторите попытку числа 1 и 2. Помните о встроенных стилях. не выполняйте поиск только внутри вашего файла css. (Я не знаю, что такое ваша среда IDE, но если вы используете Eclipse, просто нажмите CTRL + H и введите z-index для поиска всего проекта).
Если вы сделали 1,2 и 3 и все еще не работаете, значит, вы кешировали и вам нужно очистить кеш.

Если у вас есть проблема с высотой:

Высота позиции: 100%; где вы написали overflow-x: hidden. Высота 100% означает 100% от родительской высоты. Когда вы добавляете высоту: 100% внутри node, у которой у родителя высота 200px. это означает, что высота node будет 200 пикселей и не более.

Ответ 2

Используйте свойство z-index для отображения элемента над другим.

Чем больше z-индекс, тем выше остальные.

Пример: z-index: 2 будет отображаться до z-index: 1.