Question

我正在编写一个个人投资组合网站，我的导航链接指向该页面上不同的div。首次打开该页面时，我的一个导航项链接到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。每隔一次，它就会像应该的那样直接到达其顶部。所有其他链接在第一次就可以正常工作。我只是不知道为什么它第一次不起作用。有什么想法吗？

Answer 1

问题是您将thumbnails-d4的位置更改为绝对位置，这使它脱离了正常的内容流，并且当您执行此操作时，您将失去140px的高度，因为它的高度很高。当您失去该高度时，滚动会变得太低。我不确定您的项目如何组合在一起，所以我不知道您要如何解决此问题，但这就是问题所在。

如果适合您的需要，可以从一开始就将拇指放在绝对的位置，否则您将需要一个占位符以使该空间保持在滚动位置或负140。

锚链接到错误的页面位置仅一次

1 个答案: