Привязать ссылки к неправильному расположению страницы только один раз - PullRequest
Новая
       14

Привязать ссылки к неправильному расположению страницы только один раз

0 голосов
/ 18 марта 2019

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

Вот грубый пример проблемы; Я думаю, что проблема в сером поле (которое на реальном веб-сайте является контейнером для миниатюр) и javaScript. 

<!doctype html>
<html>
    <head>
        <title>test</title> 
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/main3.css" type="text/css" media="all"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/script3.js"></script>

    </head>
    <body>
        <div id="wrapper">

            <nav>
                <a id="nav_design" href="#design_portfolio_cover"> DESIGN </a> 
                <a id="nav_illustration" href="#illustration_portfolio_cover"> ILLUSTRATION </a> 
            </nav>
            <section id="design_portfolio">
                <div id="design_portfolio_cover">
                    <h2>Design--working</h2>
                </div>  
                <section id="design_portfolio_body">
                    <section id="project-d2" class="project">                           
                    </section>  
                    <section id="project-d3" class="project">                           
                    </section>                          
                    <section id="project-d4" class="project">
                        <div id="portfolio_images-d4" class="portfolio_images">
                            <div id="thumbnails-d4" class="thumbnails">     
                            </div> 
                        </div>  
                    </section>  
                </section>   
            </section>
            <section id="illustration_portfolio">
                <div id="illustration_portfolio_cover">
                            <h2>Illustration--not working</h2>
                </div>  
            </section>

            <div id="footer_grey" class="fullscreen_grey"></div> 

        </div><!--    end wrapper -->
    </body>
</html>

и CSS ... 

*{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    border: 0px;
}

#wrapper{
    width: 100%;
    margin: 0px auto;
}

nav{
    box-sizing: border-box;
    padding: 16px 0px;
    height: 100px;
    background-color: white;
    position: fixed;
}

#design_portfolio_cover{
    padding: 250px 0px;
    background-color: #e2b42b;
    height: 367px;
    width: 100%;
}
#illustration_portfolio_cover{
    padding: 250px 0px;
    background-color: #e2b42b;
    height: 367px;
    width: 100%;
}
#design_portfolio_body{
    width: 100%;
}

.thumbnails{
    width: 805px;
    height: 140px;
    background-color: gray;
}

/* JS CLASSES */

.thumbnails_fixed{
    position: fixed;
    bottom: 0px;
}
.thumbnails_final{
    position: absolute;
    bottom: 0px;
}

/* END JS CLASSES */

#footer_grey{
    width:100%;
    height: 300px;
    float: none;
}

и, наконец, JavaScript 

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    let project = $('#project-d4').offset().top;
    let project2 = $('#illustration_portfolio').offset().top;
    if (scroll >= project2){
        $('#thumbnails-d4').removeClass('thumbnails_fixed');
        $('#thumbnails-d4').addClass('thumbnails_final');
    }
    if (scroll < project2 && scroll > project){
        $('#thumbnails-d4').addClass('thumbnails_fixed');
        $('#thumbnails-d4').removeClass('thumbnails_final');
    }
});

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

Первый раз, когда я нажимаю на #nav_illustration, он появляется немного ниже #illustration_portfolio_cover. Каждый раз, он идет прямо к вершине, как и должно быть. Все остальные ссылки отлично работают с первого раза. Я просто не могу понять, почему это не работает в первый раз. Какие-нибудь мысли?

1 Ответ

0 голосов
/ 20 марта 2019

Проблема в том, что вы меняете положение эскизов-d4 на абсолютное, что выводит его из нормального потока контента, и когда вы это делаете, вы теряете 140px в высоту, так как это его высота. Когда вы теряете эту высоту, ваш свиток становится слишком низким. Я не уверен, как ваш проект собирается вместе, поэтому я не знаю, как вы хотите это исправить, но это проблема.

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

...