代码工作正常。 jsFiddle
唯一的问题是它在滑动时改变了它的宽度（当按下“点击这里”时）。似乎它会削减与#slider 中左边距的 100px 相对应的宽度。
为什么它会“跳跃”以及如何解决？代码有什么问题吗？
里面有什么：一个居中 div 的滑块，它有一个内容和一个粘性页脚。
问问题
2729 次
3 回答
3
问题在于#slider 上的负边距。由于某种原因，它无法正确绘制动画。
这是一个解决方案：http: //jsfiddle.net/vyWTL/8/
它保持margin-left在 0px，并使用 jquery 来计算left应该是什么，给定容器的宽度。由于这是动态的，并且可以在调整视口宽度时发生变化，所以我将它放在一个函数调用中，该函数调用在页面加载和窗口调整大小时调用。
于 2012-08-07T12:37:27.630 回答
2
不确定它是否符合您的需求，但您可以简单地设置：
CSS
...
.slider{
...
bottom:0px;
...
}
然后简单地使用 jQuery .slideToggle() 来处理打开/关闭状态并且更加流畅：
JS
$("#slide-link").click(function (){
$('#slider').slideToggle();
});
这是一个示例 jsFiddle
编辑 1
对此进行了更新，以便 #slide-link 也可以与 #slider 切换。
基本上我们所做的是根据#slider 是否隐藏为它设置动画：
if(!$('#slider').is(':hidden')){
$(this).animate({
top: $('#global-container').height()-23
},500)
}else{
$(this).animate({
top: '0px'
},500)
}
编辑 2
这是另一个不必处理 if(#slider is hidden) 从而只编写一次 .animate 函数的更老套的方法。
基本上 $('#slider').is(':hidden') 是一个布尔值，在 JS 中布尔值相当于 0/1 值，其中 false = 0 和 true = 1，因此您可以编写：
var hid = $('#slider').is(':hidden')
$(this).animate({
top: (1-hid)*(contHeight)
},500)
其中 contHeight 是 #global-container 高度 - #slide-link 高度。
编辑 3 滚动问题
如果我在评论中遇到了您的问题，那么当您用分配的单词 id 填充内容部分时，id 不会滚动，但内容面板似乎填充了 wole #slider 并继续页面而无法滚动它。
这是因为 .content 没有固定的高度，这是因为我们知道页脚是 70px 高，只是我们希望 .content 填满#slider 内剩余的所有空间，但是这样 .content 不会没有“固定值”，即在其 css 中没有对其高度的定义。所以我们需要做的是动态地告诉他它有多高，就像我们用#slide做的那样，所以在JS中添加
$('.content').height(contHeight-70)
这样你现在可以添加：
overflow:hidden; //this is to prevent orizontal scroll
overflow-y:scroll; // this enables vertical scroll
希望我做对了。
于 2012-08-07T12:18:59.420 回答
-1
.ui-effects-wrapper{ overflow-x: visible !important; width: 100% !important; }
于 2015-01-23T00:16:04.290 回答