admin管理员组文章数量:1320624
I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.
The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.
This is my layout structure.
<nav class="navbar"></nav>
<div class="container" id="wrapper">
<div class="row">
<div class="col-sm-8" id="blog-main"></div>
<div class="col-sm-4" id="blog-sidebar"></div>
</div>
</div>
<div id='blog-footer'></div>
Fiddle: /
I tried putting blog-sidebar
inside a wrapper div, with position: absolute
on it and with position: relative
on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.
I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.
The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.
This is my layout structure.
<nav class="navbar"></nav>
<div class="container" id="wrapper">
<div class="row">
<div class="col-sm-8" id="blog-main"></div>
<div class="col-sm-4" id="blog-sidebar"></div>
</div>
</div>
<div id='blog-footer'></div>
Fiddle: https://jsfiddle/mpxrqwwf/7/
I tried putting blog-sidebar
inside a wrapper div, with position: absolute
on it and with position: relative
on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.
1 Answer
Reset to default 4Bootstrap has a build in plugin to do that for you, just by adding a couple of data attributes.
Affix affix.js
The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;.
You just have to define an offset-top and an offset-bottom via the attributes on the element you want to be affixed. Based on your offset values the plugin will add and remove a couple of CSS classes when an offset is reached during scrolling. These classes can be styled to your needs.
Positioning via CSS
The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions
If you want more flexibility you can call the affix plugin via javaScript.
Here is your fiddle using the affix plugin via data attributes:
CSS
/** CSS relacionado à barra de navegação **/
#my-nav {
position: fixed;
width: 100%;
background-color: black;
height: 40px !important;
min-height: 0px;
z-index: 9999;
margin-bottom: 0;
}
#wrapper {
width: 81.6%;
}
#blog-header {
color: black;
text-align: right;
margin-bottom: 20px;
}
#blog-main {
/*width: 68%;*/
height: 500px;
padding: 0;
margin-right: 5px;
background-color: orange;
}
#blog-sidebar {
background-color: purple;
/*width: 30.9%;*/
width: 222px;
height: 300px;
padding: 25px 0px 20px 0px;
}
.affix {
position: fixed;
top: 40px;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
#blog-footer {
background-color: green;
height: 300px;
}
HTML
<nav class="navbar" id="my-nav"></nav>
<br /><br />
<div class="container" id="wrapper">
<div id="blog-header">
<h1>header</h1>
</div>
<div class="row">
<div class="col-sm-8">
<div id="blog-main"></div>
</div>
<div class="col-sm-4">
<div id="blog-sidebar" data-spy="affix" data-offset-top="80" data-offset-bottom="345"></div>
</div>
</div>
</div><!-- /.container -->
<div id='blog-footer'></div>
版权声明:本文标题:javascript - Fix a sidebar while scrolling until footer is reached (using Bootstrap classes) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742073415a2419266.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论