屏幕滚动后的div容器 [英] div container following scroll of screen

问题描述

我想在我的页面之一上设置一个向后兼容"的滚动侧栏.

我有一个页面，其中包含有关可能非常长的鱼类的信息以及随附的图像.

目前这些图片位于右侧窗格中，我希望它们在滚动到页面底部时能够跟随用户.

我使用以下代码取得了一些成功:

jQuery().ready(function($) {
    var $scrollingDiv = $("#sidebar");

    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
    });
});

但是当向下滚动时，它跳得太远了.

(原始位置)

(滚动鼠标滚轮单击一次)

当您开始向下滚动页面时，侧边栏大约会出现一半，因此您只能看到其中的两幅图像.

一旦用户滚动到X点(例如400像素)，我希望侧边栏开始随页面一起移动.但是，当用户再次到达页面顶部时，它还需要回到其原始位置.

是否有可以应用于此代码的修复程序，或者是解决此问题的更好方法?

---------------------------------------------------------------------------------

position:fixed问题

当我尝试按照Josh和David的建议(任一JS代码)应用position:fixed时，会发生这种情况:

以下是Firebug读取的此元素所附的CSS样式:

解决方案

您可以为此使用插件，但这是一个非常简单的任务，您可以自己完成.

考虑以下简单标记:

<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>

这将是您需要的所有javascript:

var el = $('#sidebar'),
    pos = el.position().top;

$(window).scroll(function() {
    el.toggleClass('fixed', $(this).scrollTop() >= pos);
});

现在，只要用户滚动到比侧边栏位置更远的位置，它将立即向#sidebar div中添加一个类，因此，您现在所需要的只是som CSS.我将固定位置应用于子元素以避免布局问题:

#sidebar.fixed > div{position:fixed;}

我在这里制作了一个非常简单的演示: http://jsfiddle.net/QZyH3/

I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.

I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.

The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.

I've used the following code with some success:

jQuery().ready(function($) {
    var $scrollingDiv = $("#sidebar");

    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
    });
});

But it jumps too far when scrolling down.

(original position)

(scrolled a single mousewheel click)

When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.

Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.

Is there a fix that can be applied to this code, or a better way of approaching this?

---------------------------------------------------------------------------------

EDIT: position:fixed Problem

When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:

Here is Firebug's read-out of the CSS styles attached to this element:

解决方案

You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.

Consider this simple markup:

<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>

And this would be all the javascript you need:

var el = $('#sidebar'),
    pos = el.position().top;

$(window).scroll(function() {
    el.toggleClass('fixed', $(this).scrollTop() >= pos);
});

Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:

#sidebar.fixed > div{position:fixed;}

I put up a really simple demo here: http://jsfiddle.net/QZyH3/

这篇关于屏幕滚动后的div容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！