Twitter Bootstrap 附加元素宽度从 parent 元素边界滚动
Twitter Bootstrap affix element width rolling out from parent element borders
我创建了一个面板元素并在他的 body 中放置了另一个面板元素。
比起我给这个 "inside-panel" 一个词缀插件,当我向下滚动页面时
我的 "inside-panel" 尺寸变了,看起来不太好看。我写了一个例子并穿上 bootply 来展示它的样子。
bootply example
我尝试用 JS 代码修复宽度:
var sz = $('.affix').width();
$(window).scroll(function () {
$('.affix').width(sz);
});
但是没有意义。
请告诉我如何修复 "inside-panel" 宽度并完美地保持响应。
谢谢!
"you must provide CSS for the positioning and width of your affixed
content"
当然,这完全取决于您的想法"look nice"。 Here's an example 从你那里分叉 Bootstrap。注意 #myAffix.affix
CSS 用于控制面板的位置。
通过计算 window\element 大小并以适当的百分比设置宽度来解决问题。
查看文档:http://bootstrapdocs.com/v3.2.0/docs/javascript/#affix
您可以侦听 affixed.bs.affix
事件,然后检测 scrollspy parent 的宽度,然后将 scrollspy 设置为匹配此宽度。
这是我的解决方案。
$("#scroll-spy").on('affixed.bs.affix', function(e) {
var wrapper = $("#scroll-spy-wrapper");
var scrollSpy = $("#scroll-spy");
scrollSpy.width(wrapper.width());
});
我创建了一个面板元素并在他的 body 中放置了另一个面板元素。 比起我给这个 "inside-panel" 一个词缀插件,当我向下滚动页面时 我的 "inside-panel" 尺寸变了,看起来不太好看。我写了一个例子并穿上 bootply 来展示它的样子。 bootply example 我尝试用 JS 代码修复宽度:
var sz = $('.affix').width();
$(window).scroll(function () {
$('.affix').width(sz);
});
但是没有意义。 请告诉我如何修复 "inside-panel" 宽度并完美地保持响应。 谢谢!
"you must provide CSS for the positioning and width of your affixed content"
当然,这完全取决于您的想法"look nice"。 Here's an example 从你那里分叉 Bootstrap。注意 #myAffix.affix
CSS 用于控制面板的位置。
通过计算 window\element 大小并以适当的百分比设置宽度来解决问题。
查看文档:http://bootstrapdocs.com/v3.2.0/docs/javascript/#affix
您可以侦听 affixed.bs.affix
事件,然后检测 scrollspy parent 的宽度,然后将 scrollspy 设置为匹配此宽度。
这是我的解决方案。
$("#scroll-spy").on('affixed.bs.affix', function(e) {
var wrapper = $("#scroll-spy-wrapper");
var scrollSpy = $("#scroll-spy");
scrollSpy.width(wrapper.width());
});