Заголовок сверху боковой прокрутки - PullRequest
0 голосов
/ 05 февраля 2020

На следующих страницах я хочу, чтобы верхний колонтитул и меню под ним имели полную ширину 100%, то есть я хочу, чтобы боковая прокрутка отображалась под панелью навигации.

На этой странице: http://raddar.pro/projects_7.html боковая прокрутка толкала заголовок и меню под ним влево по ширине, поэтому это не то, что я хочу. Можете ли вы помочь мне изменить код, чтобы заголовок и меню оставались на 100% ширины экрана?

На этой странице: http://raddar.pro/projects_13.html Я пробовал "overflow: hidden" для тела и "overflow-y: scroll;" для содержимого под заголовком и меню под заголовком, но это не сработало.

На странице ниже мне удалось ввести боковую прокрутку, которая показывает под заголовком и меню под заголовком: http://raddar.pro/projects_12.html

На этой странице выше I поместил мое содержимое на полную страницу. js свойство прокрутки внутри разделов и слайдов (https://alvarotrigo.com/fullPage/examples/scrolling.html#firstPage), однако тогда я не могу управлять содержимым. А именно, меню под заголовком больше не работает, т. Е. Оно не фильтрует изображения содержимого MixItUp, размещенного на полной странице. js раздел. На самом деле, иногда это работает, но это супер случайно, и я чувствую, что в коде есть некоторые совпадения, которые я не могу обнаружить (у меня такое ощущение, что это javascript проблема). Было бы замечательно, если бы вы могли помочь мне решить эту проблему, потому что мне действительно очень нравится графика прокрутки в разделе полной страницы. js, который похож на прокрутку мобильного телефона и не такой широкий, как стандартная прокрутка на стороне браузера.

Ниже приведен некоторый прогресс, которого я достиг, но все еще не совсем там.

Вариант I: http://raddar.pro/projects_14.html - здесь я могу прокрутить всю страницу. js, однако плагин mixitup не работает (ie меню плагина mixitup не будет фильтровать изображения). Ниже приведен код, который я собрал:

     afterRender:  $(function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     }),

Вариант II: http://raddar.pro/projects_15.html - здесь работает плагин mixitup, но прокрутка отсутствует, поэтому я не могу увидеть все изображения , я изменил "$" и "(" в начале кода и ")" в конце кода:

     afterRender:  function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     },

1 Ответ

0 голосов
/ 07 февраля 2020

Я быстро проверил MixItUp , но у меня нет времени на его ознакомление. Мне кажется, это очень go инструмент.

Но я думаю, что ваша проблема намного проще, если просто использовать базовое кодирование c HTML:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #363636;
}

#menu {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #D8D8D8;
}

#content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 93px);
    overflow-x: hidden;
    overflow-y: scroll;
}

#container {
    position: relative;
    top: 10px;
    left: 10px;
    right: 10px;
    width: 100%;
    height: auto;
    min-height: 10px;
}

.showItem {
    position: relative;
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    float: left;
}
<!DOCTYPE html>
<html>
    <head>
        <title> Test Scroll </title>
    </head>
    <body>
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content">
            <div id="container">
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                <div class="showItem"></div>
                
            </div>    
        </div>
    </body>
</html>

Я думаю, это то, что вы ищете?

...