最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - using a simple jquery script to have a div follow the page on scroll - Stack Overflow

programmeradmin0浏览0评论

I'm trying to use this script here: / to make a simple div that follows the window as the user scrolls. I changed it from 0 to topPadding and changed topPadding to topPadding*2 to get the right top offset.

Unfortunately this has the side effect of the object making the page a little longer and allowing the user to scroll infinitely. This bug is also actually in the original code without my larger toppadding changes if you make the window small enough.

I also tried another plugin for jquery, but it didn't work at all and this gives me what I need, so how can I fix it?

I'm trying to use this script here: http://css-tricks./scrollfollow-sidebar/ to make a simple div that follows the window as the user scrolls. I changed it from 0 to topPadding and changed topPadding to topPadding*2 to get the right top offset.

Unfortunately this has the side effect of the object making the page a little longer and allowing the user to scroll infinitely. This bug is also actually in the original code without my larger toppadding changes if you make the window small enough.

I also tried another plugin for jquery, but it didn't work at all and this gives me what I need, so how can I fix it?

Share Improve this question asked Feb 12, 2010 at 3:49 V_HV_H 1,7933 gold badges34 silver badges59 bronze badges 1
  • You changed what from 0 to topPadding? And it seems to work ok here. – Marius Commented Feb 14, 2010 at 7:01
Add a ment  | 

3 Answers 3

Reset to default 5

Why not just use CSS.

#theNonMovingDiv {position:absolute; position: fixed; top: Npx; right:Mpx}

position:fixed; doesn't work in ie6, but including the position:absolute; will give you a rough approximation.

I've knocked together this quick amendment, which limits based on the document height. I'm not certain that jQuery is giving an accurate height, hence a safety barrier of 100px. Even if the height isn't quite right, any extra scrolling will be limited and certainly not infinite.

<script type="text/javascript">
    var documentHeight = 0;
    var topPadding = 15;
    $(function() {
        var offset = $("#sidebar").offset();
        documentHeight = $(document).height();
        $(window).scroll(function() {
            var sideBarHeight = $("#sidebar").height();
            if ($(window).scrollTop() > offset.top) {
                var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
                var maxPosition = documentHeight - (sideBarHeight + 100);
                if (newPosition > maxPosition) {
                    newPosition = maxPosition;
                }
                $("#sidebar").stop().animate({
                    marginTop: newPosition
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
</script>

I can duplicate your bug in my browser (Firefox 3.5).

The problem is that the code doesn't look to see if the bottom of the sidebar falls off the end of the document.

Your best bet is to use the .height() method to check. You can get the height of the sidebar (as presented in the example) as $("#sidebar").height(), and the height of the whole document as $(document).height().

What exactly the behavior should be -- up to you. It involves an extra if, to make sure all your pixels line up right, but design questions, like how the sidebar should align against the bottom, are going to be a matter of personal taste.

发布评论

评论列表(0)

  1. 暂无评论