如何设置身体的上边距？

Question

我一直在努力思考这个问题的背景，我会尽力而为！

我正在处理一个页面，我将其导航position设置为fixed，以便在滚动时粘贴到屏幕上，并设置href a属性元素到一些ID，因此用户可以通过单击导航链接遍历页面。问题是，当我单击链接到页面的第一部分时，其内容将隐藏在导航栏后面。所以我想我可能要为页面定义新的“坐标”以重置其元素：

导航栏的标记：

    <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>

第一个内容的标记：

<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;
}

我使用这样的jQuery代码遍历页面：

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

这是我的最后一次尝试代码，我添加了一个div标签id“mask”并将其宽度设置为50px，因此请链接我链接到此伪元素的原始内容。< / p>

.Mask1
{
    width:50px;
}

我希望我的问题现在很清楚，如果不是，请告诉我。 我的问题是：当我单击导航栏中的欢迎链接时，我的名字（带有id moh的元素）隐藏在它后面，我想将它直接放在导航栏下面。 *你可以建议更好的问题措辞。

Answer 1

如果您稍微修改HTML和JS以使用数据滚动，那么您可以解决这个问题。将其用于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>

这适用于你的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;
}

.Mask1
{
    width:50px;
}

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


section {
    padding: 20px 0;
}

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

你的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;
})

检查DEMO

Answer 2

您可以直接使用此功能，无需smsaddy = "1813" & phone1 & "-18136896527@xx.com"

.Mask1

您还需要在$("#wel").click(function () { $('html, body').animate({scrollTop: 0}, 2000); }); 的顶部提供一些余量（例如，如果导航栏高50像素，那么#intro），以便不隐藏内容。

此外，在提出类似问题时，提供一个MWE是一个很好的做法，一个最小的工作示例（https://jsfiddle.net/是一个非常好的网站）。

编辑：如果它是您想要的特定网站的一种行为，您通常可以检查网站本身。特定代码示例（来自http://dmitry-pavlov.com/js/config.js）是html5up的CCA 3.0，如标题所示，因此，如果您只想复制和粘贴，请按http://html5up.net/license添加归因。

原始代码：

#intro { margin-top: 50px; }

它的作用：如果 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'); } }); 以哈希（＃）开头，则它会找到目标（$(this).attr('href')），它的偏移量，然后减去导航栏高度（var target = $('article' + $(this).attr('href'))） ，防止默认，并动画到该位置。

示例，适用于您的代码：

Math.max(target.offset().top - $('#navbar').height() + 15, 0);

如果您关心边框，可以将$('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); } }); 调整几个像素（仅+/- x）。使用就像pos。