我很喜欢以下网站左侧的浮动面板:
我不知道它叫什么名字,但我喜欢当你点击搜索按钮时它会展开到一个搜索页面,你点击另一个图标,它就像展开了它自己的页面。
我该如何实现这一点? 是否有使用html5,JavaScript或jQuery的教程?
注意:到目前为止,所有答案都只涉及浮动栏,但没有涉及在该浮动栏上单击链接以显示向右展开的窗口。
我很喜欢以下网站左侧的浮动面板:
我不知道它叫什么名字,但我喜欢当你点击搜索按钮时它会展开到一个搜索页面,你点击另一个图标,它就像展开了它自己的页面。
我该如何实现这一点? 是否有使用html5,JavaScript或jQuery的教程?
注意:到目前为止,所有答案都只涉及浮动栏,但没有涉及在该浮动栏上单击链接以显示向右展开的窗口。
<div id="float"></div>
#float{
position:fixed;
top:50px;
left:0;
}
$(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);
}
});`
使用CSS完成,
HTML
<div id="floating_sidebar">
whatever you want to put here
</div>
CSS
#floating_sidebar {
position:fixed;
left: 0;
top: 100px; /* change to adjust height from the top of the page */
}
position:absolute
不起作用,它会随着页面滚动而滚动。为了使 div 在滚动时保持在原位,您需要使用 position:fixed
。 - Hussein你可以使用这个...
你的 HTML div 在这里
<div id="scrolling_div">Your text here</div>
你的 JavaScript 函数在这里
$(window).scroll(function(){
$('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
});
你也可以使用 CSS 进行这个操作
#scrolling_div {
position:absolute;
left: 0;
top: 100px;
}
我还没有测试过,但希望它能够正常工作。
position: fixed
就足够了。 - Madara's Ghost我知道这段代码看起来很长,但是这个函数只需要指定三个简单的选项就可以工作;你的浮动元素“top”,你的“目标”(浮动元素)和“参考”元素来设置边界,它还会自动处理顶部和底部位置,不需要涉及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();
}
这是如何使用它的方法:
$(function() {
scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});