Question

我有一个Bootstrap附加导航栏，但是当我尝试滚动到div时，导航栏会覆盖div文本，所以我无法读取它。

Answer 1

实际上我无法从提供的极少代码中了解您的场景。无论如何，我在这里提出了相关的演示。看看，看看它是否对你有帮助。

下面我们将向下滚动到具有类scrollStop的标题级别3 内容。

我的方法：

1）使用offset().top

从顶部查找标题级别3 的位置

2）查找的outerHeight()＆lt;标题＆gt; 有课程header。

3）现在顶部位置 - 标题高度可帮助我们通过删除标题height来获取实际位置。

4）最后动画滚动到该位置。

<强> Working : Demo

$(".scroll").click(function()
{
    var scrollPos = $(".scrollStop").offset();
    scrollPos = scrollPos.top;
    var headerHeight = $(".header").outerHeight();
    var actualPos = scrollPos - headerHeight;
    $("body,html").animate({'scrollTop': actualPos});
});

body
{
    margin:0px;
}
.header
{
    margin:0px;
    display:block;
    left:0px;
    top:0px;
    position:fixed;
    width:100%;
    height:50px;
    background:rgba(180,30,30,0.7);
}

.container
{
    margin:55px auto 0px auto;    
    background:#ccc;
    width:90%;
    padding:10px;
    border-radius:10px;
}

.title h1
{
    text-align:center;
}

.container > div
{
    display:block;
    width:90%;
    background:#2b2937;
    color:#eee;
    padding:10px;
    margin:10px auto;
    border-radius:10px;
}

.scroll
{
    position:fixed;
    color:#fff;
    text-align:center;
    background:#34D2E3;
    padding:10px;
    border-radius:5px;
    right:0px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<span class="scroll">Scroll Down<br> Click</span>
<div class="container">
    <div class="title">
        <h1>Dummy HTML Text</h1>
    </div>
    <div>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <div>
        <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

    <h3 class="scrollStop">Header Level 3</h3>

    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <pre><code>
    #header h1 a { 
        display: block; 
        width: 300px; 
        height: 80px; 
    }
    </code></pre>
    
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>    
        
    
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>  
        
</div>
</div>

Answer 2

我找到了如何使用ScrollTo插件修复它，我改变了我的代码：

$("#a-politica-comercial").click(function() {
    $('body').scrollTo($('#politica-comercial'), 800, {offset:-110});
});

我更改了offset以减少最终位置的某些像素，所以现在我的div包含正确的文字！

非常感谢！

如何使用固定的Navbar滚动到正确的div

2 个答案: