jQuery Bootstrap 侧边栏滚动、词缀和 Scrollspy

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19482114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:04:57  来源:igfitidea点击:

Bootstrap Sidebar Scrolling, Affix & Scrollspy

javascriptjquerycsstwitter-bootstrap

提问by Kitkatnik

NEWER

较新

So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.

所以滚动现在正在工作......但它固定在页面顶部。我需要它在正确的位置(在内容旁边),然后开始在它的当前位置滚动内容。

I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html

我试图让我的侧边栏像这里这样滚动 - > http://getbootstrap.com/2.3.2/components.html

The website is http://www.katyasarmiento.zzl.org(a free hosted site for now)

该网站是http://www.katyasarmiento.zzl.org(目前是免费托管网站)



OLDER

年长的

I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.

我在这方面真的很难受。我已经查了所有我能查到的,但我仍然无法弄清楚。我用我找到的一个教程让它工作了一段时间,但它不能很好地与 ScrollSpy 一起工作。所以我正在尝试使用 Bootstrap 的词缀。

I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.

我是 javascript/jquery 的新手,所以如果有人可以查看我的网站并检查我做错了什么。

The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.

我认为 ScrollSpy 现在正在工作,我只是无法让侧边栏随页面滚动。

回答by Kitkatnik

ALRIGHT I got it to work!

好吧,我让它工作了!

What I did was change the following...

我所做的是更改以下内容...

<div class="bs-docs-sidebar span3">
    <ul class="nav nav-list bs-docs-sidenav affix-top">

To...

到...

<div class="bs-docs-sidebar span3">
    <ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">

So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.

所以我把数据间谍和数据偏移放在“bs-docs-sidenav”类上,将脚本也改为那个类,而不是“bs-docs-sidebar”类。

Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)

然后我编辑了“词缀顶部”、“词缀”和“词缀底部”的 css,效果很好:)

My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.

我最初的问题是指侧边栏类而不是 sidenav 类,因为这就是我的词缀 CSS 正在处理的内容。

Hope this helps anyone that was having a similar issue to mine :)

希望这可以帮助任何与我有类似问题的人:)

What helped me with this were thesetutorials.

这些教程对我有帮助。

回答by Ritesh

In ulelement on your page you have written-

ul您页面上的元素中,您已编写-

<ul class="nav nav-list bs-docs-sidenav">

Where you have used nav nav-list bs-docs-sidenavclasses add one more class affix-top. Then it will be -

在您使用nav nav-list bs-docs-sidenav类的地方再添加一个类affix-top。那么就会——

<ul class="nav nav-list bs-docs-sidenav affix-top">

And remove the class affix-topfrom this line, which is the parent node of your ulelement-

affix-top从此行中删除类,它是ul元素的父节点-

<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">

And write this line like-

并写下这一行——

<div class="bs-docs-sidebar span3">