[英]Is there a way to make a div on my website that follows on top when scrolling down?
I'm trying to replicate this: http://twitter.github.com/bootstrap/base-css.html#typography (the one on top that has the tabs: | Typography | Code Tables | Forms | Buttons | Icons by Glyphicons |). 我正在尝试复制这个: http : //twitter.github.com/bootstrap/base-css.html#typography (顶部有一个标签:|排版|代码表|表单|按钮|图标由Glyphicons |)。 I'd like to replicate that same fast acting effect. 我想复制同样的快速效果。
I'd like to make this div do the same: 我想让这个div做同样的事情:
#panel {
margin: auto;
border-bottom: 1px solid rgba(0,0,0,.6);
border-top: 0;
box-shadow: 0 1px rgba(0,0,0,.1),
1px 0 rgba(0,0,0,.1),
-1px 0 rgba(0,0,0,.1),
0 -1px rgb(255,255,255) inset,
0 1px 2px rgba(0,0,0,.2) inset,
1px 0 rgb(255,255,255) inset,
-1px 0 rgb(255,255,255) inset;
background: #E8E8E8;
width: 75%;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
color: rgba(0,0,0,.7);
text-shadow: 0 1px white;
padding: 2px 0px 2px 8px;
margin-top: -149px;
text-align: left;
font-size: 11px;
}
on my website: http://www.bobbaxtrade.com 在我的网站上: http : //www.bobbaxtrade.com
Thanks :) 谢谢 :)
I've created the jsFiddle here: http://jsfiddle.net/cBk7q/ 我在这里创建了jsFiddle: http : //jsfiddle.net/cBk7q/
So, you need to add a class to your css rules, to make your div static on top of the window: 因此,您需要在css规则中添加一个类,以使div在窗口上保持静态:
.fixed {
position: fixed;
top: 0;
left: 0;
}
Then, add a jQuery function to bind the scroll event and add the fixed class when you reach the desired position: 然后,添加一个jQuery函数来绑定scroll事件,并在到达所需位置时添加固定类:
<script type="text/javascript">
var $mydiv = $("#mydiv"),
origTop = $("#mydiv").position().top;
$(window).scroll(function(e) {
if( document.body.scrollTop > origTop) {
console.log($mydiv.hasClass('fixed'));
$mydiv.addClass("fixed");
}
else {
console.log('c ' + (document.body.scrollTop > origTop));
$mydiv.removeClass("fixed");
}
});
</script>
The Bootstrap website explains you how to use this feature . Bootstrap网站向您解释如何使用此功能 。
If you are using bootstrap, you can use the CSS class navbar-fixed-top
to get this behavior: 如果您使用的是bootstrap,则可以使用CSS类navbar-fixed-top
来获取此行为:
<div id="panel" class="navbar navbar-fixed-top">
...
</div>
If you want the effect, that the navigation bar only becomes fixed after scrolling over it, you need to add the class navbar-fixed-top
dynamically with some JavaScript (taken from LessCSS ). 如果您想要效果,导航栏只有在滚动后才会固定,您需要使用一些JavaScript(取自LessCSS )动态添加类navbar-fixed-top
。
Suppose you have some HTML 假设你有一些HTML
<!-- some content -->
<div id ="panel">
…
</div>
<!-- enough other content to make the document scroll -->
and some CSS 和一些CSS
.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
}
Then the following JS will give you the requested behavior. 然后,以下JS将为您提供所请求的行为。
var docked = false;
var menu = document.getElementById('panel');
var init = menu.offsetTop;
function scrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.className = 'navbar-fixed-top';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.top = init + 'px';
menu.className = menu.className.replace('navbar-fixed-top', '');
docked = false;
}
};
This example works in Firefox, Chrome, Opera and Safari. 此示例适用于Firefox,Chrome,Opera和Safari。 Internet Explorer needs a workaround. Internet Explorer需要一种解决方法。
If you're using jQuery, try https://github.com/bigspotteddog/ScrollToFixed . 如果您使用的是jQuery,请尝试https://github.com/bigspotteddog/ScrollToFixed 。 Basic usage would be: 基本用法是:
$(document).ready(function() {
$('#panel').scrollToFixed();
});
... however, see the link for options (eg allowing for footer panels when the user scrolls down, etc). ...但是,请参阅选项链接(例如,当用户向下滚动时允许页脚面板等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.