Question

我使用基本的Bootstrap Affix方法在单击列表组项时滚动到各个部分。

这一切都运作良好。

问题是，内容标题（主播）消失在我网页的标题部分后面

使用固定的顶部导航，它会在菜单后面消失，如果顶部导航未修复，但WP管理工具栏可见（登录用户），它将消失在管理工具栏后面。

有没有办法设置一种＆＃34; Top Margin＆＃34;对于标题（锚），所以它不会滚动那么远吗？

到xplain更好地看到这个截图： BEFORE AFTER

我不使用JS，只使用简单的HTML。

这里是样机：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 hidden-xs">
            <!--Affix start-->
            <div data-spy="affix" data-offset-top="0">
                <div class="list-group">
                    <a href="#section-1" class="list-group-item active">Section I</a>
                    <a href="#section-2" class="list-group-item">Section II</a>
                    <a href="#section-3" class="list-group-item">Section III</a>
                    <a href="#section-4" class="list-group-item">Section IV</a>
                    <a href="#section-5" class="list-group-item">Section V</a>
                </div>
            </div>
            <!--Affix end-->
        </div>
        <div class="col-sm-9">
            <!--Content start-->
            <div class="wrapper">
                <div id="section-2" class="section">
                    <h3>Section I</h3>
                    <p>...</p>
                    <p>...</p>               
                </div>
                <div id="section-3" class="section">
                    <h3>Section II</h3>
                    <p>...</p>
                    <p>...</p>                
                </div>
                <div id="section-4" class="section">
                    <h3>Section III</h3>
                    <p>...</p>
                    <p>...</p> 
                </div>
                <div id="section-5" class="section">
                    <h3>Section IV</h3>
                    <p>...</p>
                    <p>...</p> 
                </div>
                <div id="section-6" class="section">
                    <h3>Section V</h3>
                    <p>...</p>
                    <p>...</p> 
                </div>
            </div>
            <!--Content end-->
        </div>
    </div>
</div>

我也尝试过使用data-offset-top，但这甚至不影响内容，它适用于List（你点击滚动到的地方）

任何人都知道为什么会这样，以及我如何能够拥有＆＃34; Title＆＃34; post（我的实际锚点）作为＆＃34;上限＆＃34;这样＆＃34;标题＆＃34;在菜单/管理栏后面不会消失？

赞赏...

我已尝试过这个解决方案：不工作，完全超出范围（填充到身体赢得了解决任何问题） Bootstrap affix issues with sticky top navigation CSS解决方案将破坏滚动体验并且在我的情况下不起作用，我没有尝试JS解决方案...... Div anchors scrolling too far

Answer 1

尝试将padding-top和/ margin-top的积极.section和相同的$(document).ready(function(){ $("#nav").affix(); });结合起来

＆＃13;

.section {
  padding-top: 26px;
  margin-top: -26px;
}
.section:first-child {
  margin-top: 0;
}
#nav {
  width: 170px;
  margin-top: 30px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 hidden-xs">
            <!--Affix start-->
            <div id="nav" data-spy="affix" data-offset-top="0">
                <div class="list-group">
                    <a href="#section-1" class="list-group-item active">Section I</a>
                    <a href="#section-2" class="list-group-item">Section II</a>
                    <a href="#section-3" class="list-group-item">Section III</a>
                    <a href="#section-4" class="list-group-item">Section IV</a>
                    <a href="#section-5" class="list-group-item">Section V</a>
                </div>
            </div>
            <!--Affix end-->
        </div>
        <div class="col-sm-9" style="overflow: hidden;">
            <!--Content start-->
            <div class="wrapper">
                <div id="section-1" class="section">
                    <h3>Section I</h3>
                    <p>...</p>
                    <p>...</p>          
                    <p>...</p>
                    <p>...</p>               
                </div>
                <div id="section-2" class="section">
                    <h3>Section II</h3>
                    <p>...</p>
                    <p>...</p>
                    <p>...</p>          
                    <p>...</p>                
                </div>
                <div id="section-3" class="section">
                    <h3>Section III</h3>
                    <p>...</p>
                    <p>...</p> 
                    <p>...</p>
                    <p>...</p>          
                </div>
                <div id="section-4" class="section">
                    <h3>Section IV</h3>
                    <p>...</p>
                    <p>...</p> 
                    <p>...</p>
                    <p>...</p>          
                </div>
                <div id="section-5" class="section">
                    <h3>Section V</h3>
                    <p>...</p>
                    <p>...</p> 
                    <p>...</p>
                    <p>...</p>          
                </div>
            </div>
            <!--Content end-->
        </div>
    </div>
</div>

＆＃13;

public class MyForgroudSpan : ReplacementSpan
{
    public override void Draw(Canvas canvas, ICharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint)
    {

        var rect = new RectF(x , top, x + paint.MeasureText(text, start, end)+8, bottom);
        paint.Color = Android.Graphics.Color.ParseColor("#E5E5E6");
        canvas.DrawRect(rect, paint);
        paint.Color = Android.Graphics.Color.Black;
        int xPos = Java.Lang.Math.Round(x + (8 / 2));
        int yPos = (int)((canvas.Height / 2) - ((paint.Descent() + paint.Ascent()) / 2));

        canvas.DrawText(text, start, end, xPos, yPos, paint);

    }
    public override int GetSize(Paint paint, ICharSequence text, int start, int end, Paint.FontMetricsInt fm)
    {
        return Java.Lang.Math.Round(paint.MeasureText(text, start, end))+8;
    }
}

＆＃13;

Bootstrap Affix Content在屏幕上滚动到远处

1 个答案: