HTML Bookmarks Not Aligning Correctly With Fixed Header/Footer

user_1178867 0
Viewed 83

I am sure there is a simple fix, but really struggling - I have a bootstrap themed page with two columns, one for a navigation pane and one for content. There is a fixed header and a footer. The contents pane uses bookmarks to jump to a heading in the content.

What I'm having a problem with is that when I click on an item in the navigation pane, the contents pane moves so that the heading is off the screen behind the fixed header. Please can anybody suggest what I need to add?

I have made a simple demo page here: https://scroll-issue.azurewebsites.net/interpreting2.php.

I'd be grateful for any suggestions.

Thanks

twitter-bootstrap css html
1 Answers

When you use a same-page link to bring an element into view, the browser will position the element at the top of the page. Since you have an image and navbar at the top of your page, the top 121 pixels are covered over by those elements. You can bring your content lower on the page by adding padding to the top of the top report division. Because that put the division much lower on the page when it first opens, you can move the column back up by adding a negative margin to the containing column. To get the follow-on groups (which I’ve put into its own division – it’s easier to style), add the same padding at the top and a negative margin at the bottom of the previous division.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    height: 100%;
}

.banner {
    height: 100px;
    position: fixed;
    top: -15px;
    left: -10px;
    z-index: 1039;
    /* 1040 is modal dialog */
}

/* Make fixed navbar below EES graphic and right colour */
.navbar-fixed-top {
    top: 70px !important;
    background-color: #281A39 !important;
}

.navbar-fixed-bottom {
    background-color: #281A39 !important;
}

/* Colour menu items better for new navbar colour */
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand {
    color: #efebef;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
    background-color: #281A39 !important;
}

@media (min-width:992px) {
    .affix-md {
        position: fixed;
    }
}

#main-row {
    padding-top: 11rem;
}

#contents {
    z-index: 1; /* so it's not covered by the other column */
}

#reports {
    margin-top: -11rem;
}

#report-1, #report-2 {
    padding-top: 11rem;
}

#report-1 {
    margin-bottom: -11rem;
}
</style>

<img src="https://via.placeholder.com/2545x124.png/281A39/FFFFFF?text=filler-image" class="banner">
<nav class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" style="z-index:5000;">
                <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" href="interpreting2.php">Scroll Issue</a></div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="interpreting2.php"><span class="header-icon glyphicon glyphicon glyphicon-list-alt" aria-hidden="true"></span> Interpreting Your Report</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right"></ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row" id="main-row">
        <div class="col-xs-12 col-md-2" id="contents">
            <div class="affix-md">
                <h1>Contents</h1>
                <a href="#report-1">Report Top</a><br>
                <a href="#report-2">Second Heading</a>
            </div>
        </div>
        <div class="col-xs-12 col-md-10" id="reports">
            <div id="report-1">
                <h1>Interpreting Your Report</h1>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
                <p class="mb-5">Very long content</p>
            </div>
            <div id="report-2">
                <h1>Another Heading</h1>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <p class="mb-5">Second heading content</p>
                <br />CONTENT - END
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom visible-lg visible-md visible-sm">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-left">
            <p class="navbar-text">This is the footer</p>
        </ul>
    </div>
</nav>

user_10119840
Related