![sit]( "sit")
两个问题.当您向下滚动页面浏览每个部分时，侧边栏项目不会突出显示.单击侧边栏项目时，它会跳到相关的锚点，但是一半的内容不可见.更改data-offset值似乎无效.我在做什么错了?<div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group navbar" id="sidebar"> <ul class="nav" id="mynav"> <li><a href="#c1" class="list-group-item"> Content 1 </a> </li> <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2 </a> </li> <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3 </a> </li> <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4 </a> </li> <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5 </a> </li> </ul> </div> </div> <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0"> <h2 id="c1" class="">Content 1</h2>At Bootply we attempt to build simple Bootstrap templates that utilize... <hr class="col-md-12"> <h2 id="c2" class="">Content 2</h2>Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto... <hr class="col-md-12"> <h2 id="c3" class="">Content 3</h2>Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto... <hr class="col-md-12"> <h2 id="c4" class="">Content 4</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... <h2 id="c5" class="">Content 5</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... </div> </div></div>解决方案您的问题似乎根本不是重复的.您可以尝试执行以下操作: http://bootply.com/82265当您单击子导航中的链接时，内容将隐藏在导航栏后面.我将您的内容项包装在一个额外的div中.通过这样做，我可以在其中添加一个padding-top.填充使h2可见:var clicked = false;$('#mynav li a').click(function(){ $('#mycontent > div > h2').css('padding-top',0); $($( this ).attr('href') + ' > h2').css('padding-top','50px'); clicked = true; });$('body').on('activate.bs.scrollspy', function () { if(!clicked)$('#mycontent > div > h2').css('padding-top',0); clicked = false;})我发现的问题是撤消padding-top的一种方法.我无法使用滚动事件，因为在添加填充后，词缀触发了滚动事件.取消对"activate.bs.scrollspy"的操作似乎可行.在bootply中，我通过$('body').scrollspy({ target: '#sidebar', offset:80 });添加scrollspy，也可以使用<body data-spy="scroll" data-target="#sidebar">.我不确定scrollspy偏移量的正确值是多少. 70似乎可以工作.请注意，我也是最后一个内容项的最小高度，否则您将无法滚动最后两个项目.我认为以上内容将是对概念的证明，而不是真实的答案. 注意，Bootstrap的文档将有相同的问题.他们已通过在默认情况下在主题之间添加额外的空格来解决此问题，请参阅:将在docs.css中添加其他空格:h1[id] { margin-top: -45px; padding-top: 80px;}另请参见: https://github.com/twbs/bootstrap/issues/10670 I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the documentation on the Bootstrap site.Below is my code, and it is also here: http://bootply.com/82119Two problems.The sidebar items do not highlight as you scroll down the page past each section.When you click on a sidebar item, it jumps to the relevant anchor, but half the content is not visible. Changing the data-offset value appears to have no effect.What am I doing wrong?<div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group navbar" id="sidebar"> <ul class="nav" id="mynav"> <li><a href="#c1" class="list-group-item"> Content 1 </a> </li> <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2 </a> </li> <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3 </a> </li> <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4 </a> </li> <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5 </a> </li> </ul> </div> </div> <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0"> <h2 id="c1" class="">Content 1</h2>At Bootply we attempt to build simple Bootstrap templates that utilize... <hr class="col-md-12"> <h2 id="c2" class="">Content 2</h2>Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto... <hr class="col-md-12"> <h2 id="c3" class="">Content 3</h2>Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto... <hr class="col-md-12"> <h2 id="c4" class="">Content 4</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... <h2 id="c5" class="">Content 5</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... </div> </div></div> 解决方案 Your question does not seem to be duplicate after all.You could try something like this: http://bootply.com/82265When you click a link in your subnav the content will be hide behind the navbar. I wrapped your content items in a extra div. By doing this, I could add a padding-top to it. The padding makes the h2 visible:var clicked = false;$('#mynav li a').click(function(){ $('#mycontent > div > h2').css('padding-top',0); $($( this ).attr('href') + ' > h2').css('padding-top','50px'); clicked = true; });$('body').on('activate.bs.scrollspy', function () { if(!clicked)$('#mycontent > div > h2').css('padding-top',0); clicked = false;})Problem i found was a way to undo the padding-top. I couldn't use a scroll event cause the affix triggers a scroll event after the padding has been add. Undo on 'activate.bs.scrollspy' seems to work.In the bootply i add the scrollspy by $('body').scrollspy({ target: '#sidebar', offset:80 }); you could use <body data-spy="scroll" data-target="#sidebar"> also. i'm not sure what will be the right value for the scrollspy offset. 70 seems some kind to work.Note i also a min-height to your last content item otherwise you can't scroll the last 2 items.I think the above will be more some kind of proof of concept then a real answer.NOTE Bootstrap's documentation will have the same problem. They have fixed this by adding additional white space between the topics by default, see:Additional white space will be add in docs.css:h1[id] { margin-top: -45px; padding-top: 80px;}See also: https://github.com/twbs/bootstrap/issues/10670 这篇关于Bootstrap 3-带有侧边栏的Scrollspy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 07-22 08:24