Javascript 你如何制作一个像 envato 一样的浮动侧边栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7048955/
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
How do you make a floating sidebar like envato?
提问by Teviere
I really like the floating panel on the left side of the following site:
我非常喜欢以下站点左侧的浮动面板：
I have no idea what its called, but I like how when you click on the search button, it expands to a search page, you click on another icon, and it expands with what appears like its own page.
我不知道它叫什么，但我喜欢当你点击搜索按钮时，它扩展到一个搜索页面，你点击另一个图标，它扩展成看起来像它自己的页面。
How do I accomplish this? Is there some tutorial out there using html5, JavaScript or jQuery?
我该如何实现？是否有一些使用 html5、JavaScript 或 jQuery 的教程？
NOTE: All the answers so far only cover the floating bar, but not the clicking on a link on that floating bar to show a window expanded to the right.
注意：到目前为止，所有答案仅涵盖浮动栏，但不包括单击该浮动栏上的链接以显示向右扩展的窗口。
回答by Hussein
<div id="float"></div>
#float{
position:fixed;
top:50px;
left:0;
}
Check working example at http://jsfiddle.net/TVwAv/
在http://jsfiddle.net/TVwAv/检查工作示例
回答by Grigor
done using css,
使用css完成，
HTML
HTML
<div id="floating_sidebar">
whatever you want to put here
</div>
CSS
CSS
#floating_sidebar {
position:fixed;
left: 0;
top: 100px; /* change to adjust height from the top of the page */
}
回答by Idan
I am using this for a "floating (sticky) menu".
What I have added is:
1. to avoid my 'footer' always being "scrolled" down in case the sidemenu is a little high, I only do the scrolling if necessary, i.e -
when the content is higher than the sidebar.
2. I found the animate effect a little "jumpy" to my taste, so I just changed the css through jquery. of-course you put a 0 in the animate time, but the animation still occurs, so it's cleaner and faster to use the css.
3. 100 is the height of my header. you can assume it to be the "threshold" of when to do the scrolling.
我将它用于“浮动（粘性）菜单”。
我添加的是：
1. 为了避免我的“页脚”总是“向下滚动”，以防侧边菜单有点高，我只在必要时进行滚动，即 - 当内容高于侧边栏时。
2.我发现动画效果有点“跳跃”，所以我只是通过jquery更改了css。当然，你在动画时间里放了一个 0，但动画仍然发生，所以使用 css 更干净、更快。
3. 100 是我的标题的高度。您可以假设它是何时进行滚动的“阈值”。
$(window).scroll(function(){
if ($('#sidebar').height() < $('#content').height())
{
if ($(this).scrollTop() > 90)
$('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0);
else
$('#sidebar').css({"margin-top": ($(this).scrollTop()) });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0);
}
});`
回答by human
I know this looks quite a big piece of code, however this function just works by specifying three simple options; your floater "top", your "target" (floater) and "reference" element to set the boundaries, it also takes care of the top and bottom position automatically, no css involved.
我知道这看起来很长一段代码，但是这个函数只需要指定三个简单的选项即可；你的浮动元素“顶部”、你的“目标”（浮动元素）和“参考”元素来设置边界，它还自动处理顶部和底部的位置，不涉及 css。
function scrollFloater(marginTop, reference, target, fixWhidth = false){
var processScroll = function(){
var from = reference.offset().top - marginTop;
var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight();
var scrollTop = $(this).scrollTop();
var bottom = to - reference.offset().top + marginTop;
if( fixWhidth )
target.css('width', target.width());
if( scrollTop > from && scrollTop < to )
target.css('position', 'fixed').css('top',marginTop);
else if( scrollTop >= to )
target.css('position', 'absolute').css('top', bottom);
else
target.css('position', '').css('top',marginTop);
}
$(window).scroll(function(){ processScroll(); });
processScroll();
}
And this is how you would use it:
这就是你将如何使用它：
$(function() {
scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});
I hope this helps someone.
我希望这可以帮助别人。
回答by chhameed
you can use this ..
你可以用这个..
your html div is here
你的 html div 在这里
<div id="scrolling_div">Your text here</div>
And you javascript function is here
你的 javascript 函数就在这里
$(window).scroll(function(){
$('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
});
You can also use the css for this
您也可以为此使用 css
#scrolling_div {
position:absolute;
left: 0;
top: 100px;
}
I have not tested it but hopefully its worked.
我还没有测试过，但希望它有效。
