Как сохранить содержание ниже панели навигации, когда я нажимаю на определенный раздел страницы? - PullRequest
Новая
       1

Как сохранить содержание ниже панели навигации, когда я нажимаю на определенный раздел страницы?

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

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

HTML Код: 

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="ex.css">
    </head>

    <body>
        <header>
        <div id="nav-container">
            <nav class="navbar">
                <ul>
                    <button class="nav-btn"><li><a href="#lorem">Lorem</a></li></button>
                    <button class="nav-btn"><li><a href="#ipsum">Ipsum</a></li></button>
                    <button class="nav-btn"><li><a href="#dolor">Dolor</a></li></button>
                    <button class="nav-btn"><li><a href="#sit">Sit</a></li></button>
                </ul>
            </nav>
        </div>
        <div id="content">
            <section id="lorem">
            <h1>Lorem </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="ipsum">
            <h1>Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="dolor">
            <h1>Dolor</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="sit">
            <h1>Sit</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
    </div>
    </body>
    </html>

CSS Код: 

    #nav-container{
        border-bottom: solid 1px black;
        width: 100%;
        background: #1c1b1b;
        position: sticky;
        top: 0;
        height: 100px;
        padding-top: 50px;
    }

    nav{
        display: inline-block;
        margin: auto;
        max-width: 100vw;
        width: 100%;
        align-items: center;
        text-align: center;
        float: center;

    }

    nav > ul{
        display: inline-block;
        margin: 0;
        justify-content: center;
    }

    nav > ul >.nav-btn>li{
        padding: 0px;
        margin-bottom: 0px;
        font-size:17px;
        list-style-type: none;
        padding:10px 0px;
        cursor: pointer;
        height: 44px;
        color: white;

    }

    .nav-btn{
        background-color: #1c1b1b;
        border: none;
        border: solid 2px white;

    }

    .nav-btn:hover{ 
        background-color: white;
        transition: 0.3s;
        transition-timing-function: ease-in-out;
    }
    a:hover{
        color: black;
    }
    a{
        text-decoration: none;
        color: white;
        padding: 10px 35px;
    }

    #content{
        width: 60%;
        margin: auto;
        text-align: center;
        font-size: 2em;
    }

Как вы увидите, заголовок идет под липкой панелью навигации.

Чего я хочу достичь это что-то вроде этого. Когда я нажимаю на Ipsum, заголовок должен быть ниже скрытой панели навигации, а не под скрытой панелью навигации. Как на картинке ниже.

enter image description here

Ответы [ 4 ]

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

Вы можете достичь этого, используя jQuery.

https://jsfiddle.net/9oynpdmj/

$(function() {
    $('ul.nav a').bind('click',function(event){
    event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 150
        }, 1000);
        event.preventDefault();
    });
});

Я добавил класс nav для вашего ul. Значение '150' должно соответствовать высоте вашей общей навигационной панели. Вы можете увеличить это число, чтобы оставить больше пробелов.

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

Вам нужно использовать scroll-margin-top. (пример css-tricks) Но это не работает в IE и до хромового Edge. Если вы согласны с этим, тогда go включите scroll-margin-top.

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

#content section {
     padding-top: 160px;
     margin-top: -160px;
}

In таким образом, вы "pu sh" заголовки ниже панели навигации и компенсируете это отрицательным запасом.

Хотя я настоятельно рекомендую вам пересмотреть свой код. Например, вы используете a внутри button и justify-content для негибкого блока. Если это работа, это не значит, что это правильно. Я уже исправил это в этой демонстрации:

https://jsbin.com/ceyucolimo/edit?html, вывод (нажмите Run с js) 

#content section {
    padding-top: 160px;
    margin-top: -160px;
}
#nav-container {
    border-bottom: solid 1px black;
    width: 100%;
    background: #1c1b1b;
    position: sticky;
    top: 0;
    height: 100px;
    padding-top: 50px;
}
nav {
    display: inline-block;
    margin: auto;
    max-width: 100vw;
    width: 100%;
    align-items: center;
    text-align: center;
    float: center;
}
nav > ul {
    display: inline-block;
    margin: 0;
    justify-content: center;
}
nav > ul >.nav-btn>li {
    padding: 0px;
    margin-bottom: 0px;
    font-size:17px;
    list-style-type: none;
    padding:10px 0px;
    cursor: pointer;
    height: 44px;
    color: white;
}
.nav-btn {
    background-color: #1c1b1b;
    border: none;
    border: solid 2px white;
}
.nav-btn:hover {
    background-color: white;
    transition: 0.3s;
    transition-timing-function: ease-in-out;
}
a:hover {
    color: black;
}
a {
    text-decoration: none;
    color: white;
    padding: 10px 35px;
}
#content {
    width: 60%;
    margin: auto;
    text-align: center;
    font-size: 2em;
}
<div id="nav-container">
  <nav class="navbar">
    <ul>
      <button class="nav-btn"><li><a href="#lorem">Lorem</a></li></button>
      <button class="nav-btn"><li><a href="#ipsum">Ipsum</a></li></button>
      <button class="nav-btn"><li><a href="#dolor">Dolor</a></li></button>
      <button class="nav-btn"><li><a href="#sit">Sit</a></li></button>
    </ul>
  </nav>
</div>
<div id="content">
  <section id="lorem">
    <h1>Lorem </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="ipsum">
    <h1>Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="dolor">
    <h1>Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="sit">
    <h1>Sit</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</div>
0 голосов
/ 21 февраля 2020

Добавьте этот маленький бит jQuery код для достижения этого: https://jsfiddle.net/5bhqt6oz/ 

 $('.nav-btn').click(function(event){
    event.preventDefault();
    var id = $(this).find('a').attr('href');
    $('html, body').animate({
       scrollTop: $(id).offset().top - 160 //change this 160 according navbar height
   }, 600);
 })
0 голосов
/ 21 февраля 2020

Чтобы предотвратить подкладку содержимого под липкой панелью навигации, вам нужно добавить margin-top, равный высоте вашей панели навигации, к #content div: 


    #content {
        /* ... */
        margin-top: 100px;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...