我在页面上:

  • 固定顶部导航栏,高度为74px;
  • 右侧栏上附加了侧边栏导航;
  • 左列,具有可切换的内容;
<!-- initialization of affix -->
<body data-spy="scroll" data-target="#ds-right-navigation" data-offset="74">

<!-- toggleable content -->
<div class="panel">
<a id="ds-word-link-109401" data-toggle="collapse" data-target="#ds-word-109401" class="h3">1. równy</a>  
<section id="ds-word-109401" class="col-md-12 ds-word-box collapse in" style="height: auto;">
...collapseable content
</section>
</div>
<div class="panel">
... next panel
</div>

我遇到的问题如下:

  • 如果我单击带有锚点的链接,则左列的内容将隐藏在固定顶部导航栏下(此操作,我可能会用margin-top:-74px; padding-top:74px修复)
  • 如果我折叠左栏中的内容,则使用词缀的侧边栏菜单会变得疯狂。 它仍然认为折叠的内容是可见的,因此侧边栏突出显示指向错误(隐藏/折叠)的内容。

===============>>#1 票数:0

// scroll to anchor
if(window.location.hash) {
var hash = window.location.hash.replace(/\/$/, "");
if(hash.length){
  var top = $(hash).offset().top;
  //133 = 74 + 74 - 1, where 74 is offset high and -1px for affix
  $('body, html').stop().animate({ scrollTop: $(hash).offset().top -133 }, 500);
}
}

$('a[href^=#]').on('click',function() {
var hash = $(this).attr('href');
if(hash !== '#') {
  // top offset is 74 and - 1px is for affix
  $('body, html').stop().animate({ scrollTop: $(hash).offset().top -73 }, 500);
}
});

  ask by user3554259 translate from so

未解决问题?本站智能推荐:

1回复

带有scrollspy和页面锚点的Bootstrap词缀导航栏单页面

这适用于单个页面,其中导航栏仅链接到本地​​锚点。 导航栏位于标题之后,但在向下滚动时会粘到顶部。 你可以在github页面上看到它是如何工作的 但我有链接/锚点的两个偏移问题: 只要您不滚动,锚点就会被导航栏偏移并屏蔽。 一旦添加了导航栏,以下链接按预期工作,
1回复

Bootstrap词缀边栏问题

我的网站项目有问题。 我要让我的#sidebar的基础上,贴上: 本教程,但它仍然没有工作... 怎么了 ? 网站xxx
1回复

顶部导航栏词缀

这让我发疯了:( 我的代码有3个问题 。 1,顶部导航栏没有附加词缀插件,页面滚动但没有固定在页面顶部,垂直词缀也是如此,页面右侧也有图像不使用data-affix属性响应。 2,放置在导航栏下方的容器会被导航栏覆盖。但是当我更改margin-top属性时可以,可以不使用mar
1回复

bootstrap3中附加词条导航栏的奇怪行为

我一直在使用bootstrap3和Jekyll来改善网站。 我已经为_include文件夹制作了一个header.html文件,该文件将包含在页面中,以在下面提供巨型广告机和导航栏。 这是指向整个文件夹副本的链接,以防万一我在此处省略任何内容,并且索引页应该加载到可能会遇到我的问题或可能不会
2回复

当词缀div大于内容和窗口时,附带引导程序的问题

当词缀div大于主要内容和窗口时,我有一个关于词缀引导程序的问题。 在这里,一切都很好,因为有足够的内容: http : //jsfiddle.net/d8jzenbr/ 当内容不够大时,请看这里的问题: http : //jsfiddle.net/90m0r91t/ (当affi
1回复

Bootstrap 3使用附加功能在滚动时将导航栏位置固定到顶部

这让我疯了......这可能很简单,因为我没有打钉:请给出一个提示:-) 我正在尝试使用Bootstrap 3为我的网站添加新的布局。 滚动时,我希望导航栏固定在屏幕顶部。 我得到了它的工作,但当词缀类开始时,导航栏下面的内容发生了变化。我无法找到它的方法。
1回复

导航栏固定顶部将内容向上推

我目前在页面顶部有一个导航栏,它是静态的,但是当我尝试使其固定时,它总是“吃掉”它下面的内容。 静态时启动 修复时启动 有没有什么办法解决这一问题?
1回复

可滚动的侧边栏,全高

我目前正在编写一个Angular应用程序,该应用程序具有顶部固定引导导航栏和侧边栏容器,侧边栏容器由侧边栏标题和显示某些内容的可滚动侧边栏列表组成。 因此我使用以下CSS类: 以下html代码: 以下jsfiddle是一个最小的工作示例: https://jsfi
2回复

使用侧栏滚动时如何防止空格?

我目前正在使用Bootstrap构建侧边栏。 我已经建立了栏,但是当我向下滚动页面时,侧栏和导航栏之间会出现空白。 无论如何,当向下滚动页面时,是否可以使导航栏保持静止或填充空白? 我包括了屏幕截图和代码。 正常,滚动之前 滚动后 代码如下: 样式表: }
1回复

固定的顶部导航栏覆盖了锚点的内容

这是一个具有固定导航栏和锚定内容的登陆页面,使用的是bootstrap scrollspy和affix。 我通过数据属性在顶部导航栏上添加了词缀。 一切正常,除了附加的顶部导航栏覆盖内容的顶部。 现在是这样的: 这应该是这样的: 导航栏代码: 这是实时示