How to set the top margin of the body?

Question

I've been struggling thinking of the context of this question, I'll try do my best!

I'm working on a page which I set its nav position to fixed so it stick to the screen while scrolling, and set the href attributes of the a elements to some Ids, so the user can walk through the page by clicking the nav links. The problem is when I click the link which goes to the first part of the page, its content become hidden behind the nav bar. So I thought I may have to define new "coordinates" to the page to resettle its elements:

The markup of the nav bar:

    <nav id="navbar">
        <ul id="navItems">
            <li><a id="wel">Welcome</a></li>
            <li><a id="SendMsg">Send me a message</a></li>
            <li><a id="myResume">My Resume</a></li>
        </ul>
    </nav>

The markup of the very first content:

<div class="Mask1"></div>
<div id="intro">
    <div id="name">
        <h1 id="moh">Mohamed Ahmed Eshawaf
        </h1>
    </div>
    <br />
    <div id="pos">
        <h3>.NET Developer</h3>
    </div>
    <br />
    <div id="pos2">
        <h3>Web Designer</h3>
    </div>
    <br />


    <div id="pos3">
            <p style="font-size:24pt">
Some paragraph here!                   
        </p>
    </div>
</div>

CSS:

#navbar {
    background-color: #019AA4;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: fixed;
    right: 13%;
    top: 0px;
    z-index: 888;
    display: block;
}

ul#navItems li {
    float: left;
    line-height: 48px;
    margin-right: 30px;
}

#navItems {
    position: absolute;
    top: 0px;
    right: 150px;
    list-style-type: none;
    width: 615px;
    height: 50px;
    margin: 0 auto;
}

I used jQuery code like that to walk through the page:

 $("#wel").click(function () {
                $('html, body').animate({
                    scrollTop: $(".Mask1").offset().top
                }, 2000);

this is my last try code, which I added a div tag with id "mask" and set its width to 50px, so rather linking the original content I linked to this pseudo element.

.Mask1
{
    width:50px;
}

I hope my problem is clear now, let me know please if it's not. My problem is: when I click the link Welcome in the navigation bar my name (the element with id moh) becomes hidden behind it, I want to position it directly under the navbar. *You can suggest better question wording.

I think the easiest solution is to add a `padding-top: 50px;` to the body, or to a container element if you have any. Your navbar of 50px should then nicely cover this area. — GolezTrol, Jan 13 '16 at 00:27
I'm confused by your explanation. Are you trying to have some form of tabbed browsing like http://jqueryui.com/tabs/ or http://getbootstrap.com/javascript/#tabs> — thebarless, Jan 13 '16 at 00:28
@GolezTrol Yes you are right, but the page container has a border that is positioned right under the navbar, adding padding will add space between them which is not good from design view. — , Jan 13 '16 at 00:35
@thebarless No, something like that: http://dmitry-pavlov.com/ — , Jan 13 '16 at 00:36
I think this might help you: http://stackoverflow.com/questions/8711333/bootstrap-js-scrollspy-with-animated-scroll — thebarless, Jan 13 '16 at 00:45
That dmitry site uses the same solution: a padding for the content wrapper. You could add an *extra* element for the padding and an inner element for the border, or you could try giving it a top margin instead of a top padding. Other alternatives: add the border as part of the nav, or use `content-wrapper::before` for that line and position it absolutely to put the line in the right place. — GolezTrol, Jan 13 '16 at 00:45
could you please explain this in more detail? what about an answer? — , Jan 13 '16 at 00:56

score 1 · Answer 1 · answered Jan 13 '16 at 00:59

You'd be able to work this out if you modify your HTML and JS a little to use data-scroll. Use this for your HTML:

<nav id="navbar">
    <ul id="navItems">
        <li><a id="wel" href="#" data-scroll="top">Welcome</a></li>
        <li><a id="SendMsg" href="#" data-scroll="msg">Send me a message</a></li>
        <li><a id="myResume" href="#" data-scroll="resume">My Resume</a></li>
    </ul>
</nav>
<div class="wrapper">
    <section id="top" data-anchor="top">
        <div id="name">
            <h1 id="moh">Mohamed Ahmed Eshawaf</h1>
        </div>
        <div id="pos">
            <h3>.NET Developer</h3>
        </div>
        <div id="pos2">
            <h3>Web Designer</h3>
        </div>
        <div id="pos3">
            <p style="font-size:24pt">
                Some paragraph here!
            </p>
        </div>
    </section>
    <section id="msg" data-anchor="msg">

        <h1>Send me a message</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

    <section id="res" data-anchor="resume">

        <h1>My Resume</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>
</div>

And this for your CSS (which covers the margin question but with padding):

#navbar {
    background-color: #019AA4;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: fixed;
    right: 13%;
    top: 0px;
    z-index: 888;
    display: block;
}

ul#navItems li {
    float: left;
    line-height: 48px;
    margin-right: 30px;
}

#navItems {
    position: absolute;
    top: 0px;
    right: 150px;
    list-style-type: none;
    width: 615px;
    height: 50px;
    margin: 0 auto;
}

.Mask1
{
    width:50px;
}

#intro {
    position:relative;
    top:80px;
}


section {
    padding: 20px 0;
}

.wrapper {
    margin: 0 auto;
    position: relative;
    padding: 28px 0 0 0;
}

And your JS:

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint  = $('section[data-anchor="'+scrollAnchor+'"]').offset().top - 28;

   $('body,html').animate({
       scrollTop: scrollPoint
   }, 2000);
   return false;
})

Check the DEMO

That usually means you have another script conflicting with your problem. It will take some debugging to single out the problem. I have somewhat the same deal here. I've been working on this http://stackoverflow.com/questions/34711888/stop-floating-labels-from-resetting-back-to-original-position . Someone offered a solution that works in codepen but not in my site. — LOTUSMS, Jan 13 '16 at 13:43

snawster · Answer 2 · 2016-01-13T01:12:46.907

You can use this directly, no need for a .Mask1

$("#wel").click(function () {
    $('html, body').animate({scrollTop: 0}, 2000);
});

You'll also need to provide some margin at the top of #intro (eg. if the navbar is 50px tall, then #intro { margin-top: 50px; }) so that the content is not hidden.

Also, it is usually a good practice to provide a MWE, a minimal working example (https://jsfiddle.net/ is a quite nice site) when asking a question like this.

EDIT: If it is one behavior from a specific site that you want, you can usually inspect the site itself. The specific code sample (from http://dmitry-pavlov.com/js/config.js) is CCA 3.0 by html5up as you can see in the header, so if you want to just copy&paste, add attribution as per http://html5up.net/license.

The original code:

    jQuery('a').click(function(e) {
        var t = jQuery(this), h = t.attr('href'), article;

        if (h.charAt(0) == '#' && h.length > 1 && (article = jQuery('article#' + h.substring(1))).length > 0)
        {
            var pos = Math.max(article.parent().offset().top - _nav.height() + 15, 0);
            e.preventDefault();
            _bh.animate({ scrollTop: pos }, 'slow', 'swing');
        }
    });

What it does: If $(this).attr('href') starts with a hash (#), it then finds the target (var target = $('article' + $(this).attr('href'))), its offset, and then subtracts the navbar height (Math.max(target.offset().top - $('#navbar').height() + 15, 0);), prevents the default, and animates to that position.

Example, adapted to your code:

$('a').click(function(e) {
    var href = $(this).attr('href'), div;
    if (href.charAt(0) == '#' && (div = $('div' + href))) {
        e.preventDefault();
        var pos = Math.max(div.offset().top - $('#navbar').height(), 0);
        $('html, body').animate({scrollTop: pos}, 2000);
    }
});

You can tweak pos by a few pixels (just +/- x) if you care about the borders. Use just like <a href="#intro">Intro</a>.

Can't add comments under the question, sorry. The navbar's height is measured in pixels, you can simply add/remove a pixel or two if the borders don't align. — snawster, Jan 13 '16 at 00:38
If you want to scroll to another part of the page, you need to have `$('html, body').animate({scrollTop: $('.Example').offset().top + 50}, 2000);`, where 50 is the height of your header, ie. scroll to the desired part, then scroll a bit more to get the content from under the header. — snawster, Jan 13 '16 at 00:41

How to set the top margin of the body?

2 Answers2