Question

我的网站：zarwanhashem.com

我正在使用着陆页主题和滚动导航css，可在此处找到： http://startbootstrap.com/template-overviews/landing-page/ http://startbootstrap.com/template-overviews/scrolling-nav/

2个问题：

当我使用导航栏导航到不同的页面时，下一个“页面”从底部向上爬行，因为我实际导航到的页面没有填满整个屏幕。如何才能使额外的空间填充背景颜色？
当我导航到不同的部分时，滚动停止得太晚了。如图所示，图像和导航栏之间的间距不存在。那里应该有50px填充，以使空间等于导航栏的大小。我尝试在div中添加填充，但填充进入上一部分，它具有不同的背景颜色，因此它不适合。

另外，一个随机的错误，但两个部分之间有一个相同的符号，我找不到原因。

我将不胜感激。

这是我的一些代码。所有这些都是在网站上公开的，所以如果你想看它就可见。由于颜色问题，我现在拿走了50px填充。

机器人部分的代码（其他项目部分具有相同的结构）：

<div id="robotAI" class="content-section-b">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Fighter Robot AI</h2>
                    <p class="lead">An object oriented robot programmed in Java. It fought robots
                                    created by other students in an environment created by a third party. I also created other robots 
                                    and tested them against each other to determine the best strategy. A brief report summarizing how the robot's intelligence
                                    works can be found <a href="robotAIReport" target="_blank">here</a>.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <img class="img-responsive" src="img/robotAI.png" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>

关于部分的代码（简历部分具有几乎相同的结构）：

<div id="about" class="content-section-a">
        <div class="container">
            <div class="row">
                    <h2 class="section-heading" style="text-align:center">About Me</h2>
                    <p class="lead">I'm a passionate student who loves coding. In high school I took 3 computer science
                                    courses, which introduced me to the world of programming. I try to make free time
                                    in my schedule for coding so that I can fiddle around with different languages and problems. I've worked with Turing, Python, and Java. I also have a basic understanding
                                    of HTML and CSS.
                                    <br><br>
                                    My other interests include martial arts and chocolate. I trained in mixed martial arts for 10 years, and currently
                                    hold a 2nd degree black belt. The focus of my training was karate, but I also worked with tae kwon do and jujutsu.
                                    <br><br>
                                    I am currently seeking a software development internship/co-op position from May-August 2015. You can find more information
                                    about me on my <a href="LinkedIn">LinkedIn page</a>.</p>           
            </div>

        </div>
        <!-- /.container -->

    </div>

这是我对登陆页面css所做的唯一更改（不确定这些是否实际上是更改，我可能会将它们恢复为原来的状态）：

.content-section-a {
    background-color: #f8f8f8;
}

.content-section-b {
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

导航条形码：

<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Zarwan Hashem</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">

                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li><a href="#about" class="page-scroll">About Me</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class = "page-scroll" href="#robotAI">Fighter Robot AI</a></li>
                        <li><a class = "page-scroll" href="#spaceInvaders">Space Invaders</a></li>
                        <li><a class = "page-scroll" href="#snake">Snake</a></li>
                    </ul>
                    </li>
                    <li>
                        <a class="page-scroll" href="#resume">Resume</a>
                    </li>
                </ul>
                <a class="navbar-brand pull-right">zarwan@zarwanhashem.com</a>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

请注意，我实际上并没有使用滚动导航代码中的部分。我只使用导航栏部分。另外我对CSS和HTML也很陌生，所以请稍微贬低你的解释。

Answer 1

如果你想让每个部分填满整个空间你会遇到一个问题，每个用户都有不同的屏幕高度，我不知道是否有办法用css做这个但我有这个解决方案使用jQuery：

<script type="text/javascript">
$(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
})
</script>

如果您已经有jQuery，只需将此脚本添加到正文的底部。

至于你的第二个问题，因为你的导航栏被设置为固定，并且处理滚动的javascript将div放在窗口的顶部，以修复你要么改变javascript处理滚动或只增加每个部分的填充顶部。

编辑：要修复滚动问题，您可以编辑文件scrolling-nav.js并通过从偏移量（）中减去50来更改单击事件处理程序.top：

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top - 50
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});

Bootstrap一页网站主题格式化问题

1 个答案: