Tag: 侧边栏

相对侧边栏固定，当它到达窗口的末端: 我需要的是侧边栏滚动与正常页面（相对），当边栏的最后一行文本（无论什么）进入视图时，sidbar应该更改为固定。因此，我不会在侧边栏区域有空的空间。到目前为止我得到了什么： $(function() { var top = $(‘#sidebar’).offset().top; var sidebartop = $(‘#sidebar’).height() / 2; $(window).scroll(function(evt) { var y = $(this).scrollTop() – sidebartop; if (y > top) { $(‘#sidebar’).addClass(‘fixed’).css( “top”, -top -sidebartop + 220) } else { $(‘#sidebar’).removeClass(‘fixed’); $(‘#sidebar’).css( “top”, “auto” ); } }); }); http://jsfiddle.net/VtPcm/437/ 它实际上是工作 – 但不是动态的，所以如果我改变侧边栏的高度，我必须再次设置脚本 – 所以我该如何改变它？

Javascript使侧边栏“滚动”到页面，直到其底部边缘打到页脚: Javascript使侧边栏“滚动”到页面，直到其底部边缘打到页脚。关键是我有这个侧边栏应该与页面一起滚动并在它的底部边缘撞到页脚的顶部边缘时停止 – 在此之后它应该默认行为（再次是静态的），这可以在这里看到： http： //zakuvavanje.rs/ 。这个问题类似于这个jQuery滚动DIV：当DIV到达页脚时停止滚动，我不想问这个问题，但是我不知道如何实现它，脚本应该放到我放的地方 console.log(‘now the script should start’); PS问题是针对较小的屏幕，请将视口设置为1366×768或更低以查看问题。这是我脚本的pastebin： http ： //pastebin.com/8anjKR1d ，这里的脚本相同： //”fixed” sidebar function scrollingAside() { var $aside = $(‘.aside’), asideH = $aside.outerHeight(), asideTop = $aside.offset().top, docH = $(document).height(), asideOfsB = docH – asideTop – asideH, footerH = $(‘.footer’).outerHeight(), wScrollTop = $(window).scrollTop(), wHeight = $(window).height(), scrollBtm […]

帮助滚动/关注侧栏: 使用jquery技术从css-tricks.com有一个滚动/后面的侧边栏，如果你不知道我在说什么，这里是代码： $(function() { var $sidebar = $(“#scroll-menu”), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() – offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); 这里也是链接http://css-tricks.com/scrollfollow-sidebar/ 我遇到的唯一问题是它有一个容器，但是当你滚动到页脚足够大时，侧边栏会滚出容器。有没有办法限制它向下滚动多远？以下是正在发生的事情的图像： http ： //tinypic.com/r/2mcj2mv/7 提前致谢

可折叠的侧边栏，带有流畅的twitter bootstrap: 我正在寻找一个CSS解决方案来创建一个按钮，使用twitter bootstrap打开和关闭侧边栏。我喜欢人们在他们的网页上看到的一个小图标，当侧边栏关闭时，它们看起来像拉片，然后在拉出边栏时跟随它 – 这是否有名字？我已经创建了一个toggleSidebar图标链接来执行此操作，但我有两个问题：我不能使用float：left或display：inline-block让它与侧边栏一起浮动修复了，它创建了一个自己的列…我希望它浮动在主要内容之上。 html： css： #toggleSidebar { /* float: left; */ /* display:inline-block; */ position:fixed; display:block; left:0; top:45px; color:#779DD7; padding:2px 4px; } javascript： function sidebar(panels) { if (panels === 1) { $(‘#content’).removeClass(‘span9’); $(‘#content’).addClass(‘span12 no-sidebar’); $(‘#sidebar’).hide(); } else if (panels === 2) { $(‘#content’).removeClass(‘span12 no-sidebar’); $(‘#content’).addClass(‘span9’); $(‘#sidebar’).show(); } } $(‘#toggleSidebar’).click(function() { […]