javascript - How to make fixed floating element stop at #footer? - Stack Overflow

admin管理员组

文章数量:1276749

Below is the code I am using to fix a sidebar as the user scrolls. As of now, it overlaps with my footer. How can I make it stop at a certain point or when it hits the footer?

<script type="text/javascript">
    $(document).ready(function() {
    if ($('.pageheaderwrap').length) {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 362) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "255px"
                });
            }
        });
    } else {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 230) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "125px"
                });
            }
        });
    }
});
</script>

Below is the code I am using to fix a sidebar as the user scrolls. As of now, it overlaps with my footer. How can I make it stop at a certain point or when it hits the footer?

<script type="text/javascript">
    $(document).ready(function() {
    if ($('.pageheaderwrap').length) {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 362) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "255px"
                });
            }
        });
    } else {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 230) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "125px"
                });
            }
        });
    }
});
</script>

• javascript
• jquery

Share Improve this question Follow edited Jul 15, 2011 at 2:12 Chandu 82.9k1919 gold badges135135 silver badges135135 bronze badges asked Jul 15, 2011 at 2:08 Mike StevensonMike Stevenson 6111 gold badge11 silver badge88 bronze badges 2

• @Cybernate: Was just about to fix the indenting myself. :-) – GregL Commented Jul 15, 2011 at 2:15
• You could figure out the distance between the two elements (footer and sidebar), and when that distance <= 0 you could stop moving the sidebar down. Check out this post: stackoverflow./questions/225563/…. – Aaron Ray Commented Jul 15, 2011 at 2:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Here is something that might work for you:

http://jsfiddle/y3qV5/7/

The jquery plugin that is doing this sets elements fixed whatever margin from the top of the page. With an optional limit, it will unfix the element and have it continue to scroll up the page, keeping it away from your footer. You would set the limit to the top of your footer, plus the height of whatever your target element is.

Here is the code usage for this scenario (the fiddle above):

$(document).ready(function() {
    $('#cart').scrollToFixed({
        marginTop: 10,
        limit: $('#footer').offset().top 
    });
});

Here is the link to the plugin and its source:

https://github./bigspotteddog/ScrollToFixed

Why not eliminate all the javascript and do it with CSS:

.sidebar-left {
    position: fixed;
    bottom: 20px; /* height of your footer */
}

I see the easiest way to reach this is to use position: sticky; instead of position: fixed; and give the parent of this section position: relative; to keep the sticky container within the parent container borders.

本文标签： javascriptHow to make fixed floating element stop at footerStack Overflow