如何拥有 2+盒子滑下来

发布于 2024-09-14 23:44:10 字数 360 浏览 1 评论 0原文

我一直在阅读来自几个不同地方的教程，例如 http://css-tricks.com/scrollfollow-sidebar / 或 http://jqueryfordesigners.com/fixed-floating-elements/ 并一直在摆弄它们，但似乎无法弄清楚我如何能够添加更多内容，而不仅仅是页面上的一个滑动框。有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陈甜 2024-09-21 23:44:10

我的假设（来自第一个示例链接）是，您不只是让 #sidebar 留在视图中，而是希望另一个元素也随窗口滚动（即登录用户的详细信息）。

最简单的方法是将此信息添加到现有的滚动元素中：

<ul id="sidebar">
    <li id="user-details">Name: John Doe<br/>Email: [email protected]</li>  
    <!-- remaining links here --> 
</ul>

但是，如果您想使用窗口滚动两个元素：

<ul id="sidebar">
    <!-- sidebar links --> 
</ul>
<ul id="user-details">
    <!-- user details --> 
</ul>

只需在 $(window 内对它们的两个 margin-top 进行动画处理即可).scroll() 事件处理程序：

编辑

以下代码滚动 #sidebar 直到滚动达到 2000px，此时停止并滚动 # user-details 直到滚动达到 4000px：

// constants for the scrolling
var offsetSidebar = $("#sidebar").offset();
var offsetUserDetails = $("#user-details").offset();

// on scroll of window
$(window).scroll(function() {
    scrollElement($("#sidebar"), offsetSidebar, 2000);
    scrollElement($("#user-details"), offsetUserDetails, 4000);
});

// handle the scrolling
function scrollElement(elem, offset, boundary){
    var currOffset = elem.offset();
    if(currOffset.top < boundary && $(window).scrollTop() < boundary){
        if ($(window).scrollTop() > offset.top) {
            elem.stop().animate({marginTop: $(window).scrollTop() - offset.top});
        } else {
            elem.stop().animate({marginTop: 0});
        }
    }
}

您可以在此处查看它的实际效果。

My assumption (from the first example link) is that instead of just having #sidebar stay in view, you want to have another element scroll with the window as well (i.e. logged in user's details).

The easiest way would be to add this information to your existing scrolling element:

<ul id="sidebar">
    <li id="user-details">Name: John Doe<br/>Email: [email protected]</li>  
    <!-- remaining links here --> 
</ul>

However, if you want to scroll two elements with the window:

<ul id="sidebar">
    <!-- sidebar links --> 
</ul>
<ul id="user-details">
    <!-- user details --> 
</ul>

It would just be a matter of animating both of their margin-top's inside the $(window).scroll() event handler:

Edit

The following code scrolls #sidebar until it reaches 2000px of scroll at which point it stops and scrolls #user-details until it reaches 4000px of scroll:

// constants for the scrolling
var offsetSidebar = $("#sidebar").offset();
var offsetUserDetails = $("#user-details").offset();

// on scroll of window
$(window).scroll(function() {
    scrollElement($("#sidebar"), offsetSidebar, 2000);
    scrollElement($("#user-details"), offsetUserDetails, 4000);
});

// handle the scrolling
function scrollElement(elem, offset, boundary){
    var currOffset = elem.offset();
    if(currOffset.top < boundary && $(window).scrollTop() < boundary){
        if ($(window).scrollTop() > offset.top) {
            elem.stop().animate({marginTop: $(window).scrollTop() - offset.top});
        } else {
            elem.stop().animate({marginTop: 0});
        }
    }
}

You can see it in action here.

回复收藏 0 原文

~没有更多了~