Geek asks and answers

Fixed Floating Element Stop at Footer

I used the code http://jqueryfordesigners.com/fixed-floating-elements to float an element after scrolling to a specific point. Here is the site I'm working on: http://bodyecology.com/articles/gut-type-update

As you can see, the right column is fixed when scrolling, but overlaps in the footer. How can I make him stop just above the footer?

Currently used:

<script>
    jQuery(document).ready(function () {  
    var top = jQuery('#news_sidebar').offset().top - parseFloat(jQuery('#news_sidebar').css('marginTop').replace(/auto/, 0));
    jQuery(window).scroll(function (event) {

        var y = jQuery(this).scrollTop();

        if (y >= top) {

        jQuery('#news_sidebar').addClass('fixed');

        } else {

       jQuery('#news_sidebar').removeClass('fixed');
    }
  });
 });
</script>
+3
source share
3 answers

This violin does what you are looking for:

http://jsfiddle.net/ZczEt/9/

Here is the javascript that handles the floating element $ ('# summary') on the right:

$('#summary').scrollToFixed({
    marginTop:
        $('.header').outerHeight() + 10,
    limit:
        $('.footer').offset().top -
        $('#summary').outerHeight() -
        10
});

Here is the jquery plugin and its source:

https://github.com/bigspotteddog/ScrollToFixed

+6

, , div " "

, , , ( - javascript newvie), div :

$(window).scroll(function () {

            // distance from top of footer to top of document
            footertotop = ($('#footer').position().top);
            // distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
            scrolltop = $(document).scrollTop() + 570;
            // difference between the two
            difference = scrolltop - footertotop;

            // if user has scrolled further than footer,
            // pull sidebar up using a negative margin

            if (scrolltop > footertotop) {

                $('#cart').css('margin-top', 0 - difference);
            }

            else {
                $('#cart').css('margin-top', 0);
            }


        });

, , - :) ,

+1

, , , . , , .

, . , . .

0

More articles:


All Articles