jquery不浮动的浮动框
我不熟悉HTML和CSS,我尝试根据这里的说明创建一个浮动侧栏。因此,我在html页面中添加了以下javascript代码:jquery不浮动的浮动框,jquery,html,css,css-float,Jquery,Html,Css,Css Float,我不熟悉HTML和CSS,我尝试根据这里的说明创建一个浮动侧栏。因此,我在html页面中添加了以下javascript代码: <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascr
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
var $sidebar = $("#sharebox"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 5;
$window.scroll(function() {
if ($window.scrollTop() > (offset.top-topPadding)) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>
并使用以下代码创建元素:
<div id="sharebox">
<ul>
<li><a href="#Search" onclick="return false;"> Search </a></li>
<li><a href="#Plots" onclick="return false;"> Plots </a></li>
<li><a href="#Statistics" onclick="return false;"> statistics </a></li>
</ul>
</div>
但它不是漂浮的。。。谁能给我一些提示吗
谢谢。在#sharebox
中,您的浮动:右
和位置:绝对
是冲突的。如果要使其浮动,请删除position:absolute,如下所示:
#sharebox {
float: right;
margin-left: 800px;
background: #FAFAFA;
border: 1px solid #E5E5E5;
-webkit-border-radius: 3px; /* gets older safari browsers */
-moz-border-radius: 3px;
border-radius: 3px;
}
当我测试这个时,它完全正确地浮动,并在使用jQuery滚动时上下滑动。经过一些错误并尝试,尽管我仍然不知道原因,但我认为上面的代码基本上可以工作,但请确保:1。在代码之前成功加载jquery(人们建议从GoogleAjax和本地回退副本加载jquery);2.将浮动内容放入足够长的div中,使其有一些空间来显示它浮动:)我不确定这些东西是如何在内部工作的。。。它实际上对我现在起作用了,在我开始谈论那个浮动部分并做了一段时间的其他事情之后。。。当我移除
位置时:绝对代码>语句它实际上停止了工作。如果没有看到您当前的html/css代码,很难知道。我知道,使用你在问题中所展示的内容,以及我的编辑,我理解你希望它的工作方式。你能用你正在使用的修改过的代码编辑你的问题,并扩展你所说的“停止工作”是什么意思吗?我想关于上下文依赖性你是对的。我想我使用的代码一开始不起作用是因为我把它们放在了页面的末尾,就像你说的,在我删除了position:absolute
之后,它们就留在了那里。实际上,我不知道“绝对”和“相对”位置有什么区别。绝对允许您使用顶部和左侧(或底部和右侧)在要定位的父容器中准确地告诉它。“相对位置”使元素位置/流动自然,这在大约95%的情况下是正确的。如果你想让它浮动,它必须是相对的。
#sharebox {
float: right;
margin-left: 800px;
background: #FAFAFA;
border: 1px solid #E5E5E5;
-webkit-border-radius: 3px; /* gets older safari browsers */
-moz-border-radius: 3px;
border-radius: 3px;
}