Исправлена ​​остановка плавающего элемента в нижнем колонтитуле

Question

Я использовал код из http://jqueryfordesigners.com/fixed-floating-elements для перемещения элемента после прокрутки до определенной точки. Вот сайт, над которым я работаю: http://bodyecology.com/articles/gut-type-update

Как видите, правая колонка фиксируется при прокрутке, но перекрывается в нижнем колонтитуле. Как я могу заставить его остановиться чуть выше нижнего колонтитула?

В настоящее время используется:

<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>

Answer 1

Эта скрипка делает то, что вы ищете:

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

Вот javascript, который обрабатывает плавающий элемент $ ('# summary') справа:

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

Вот плагин jquery и его источник:

https://github.com/bigspotteddog/ScrollToFixed

Answer 2

У меня такой же код, как и у вас, чтобы пропустить мой div из того же поста "Fixing-Floating-Elements"

и у вас была та же проблема, что и у вас с перекрывающимся нижним колонтитулом, ЕДИНСТВЕННОЕ решение, работавшее для меня (я новичок в javascript), вытаскивало 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);
            }


        });

Это было полезно для меня, я надеюсь, что кто-то найдет это полезным :) Я реализовал это на своем сайте, чтобы пользователи могли получить полный просмотр статей

Answer 3

Я могу ошибаться, но, похоже, это размер содержимого внутри правой боковой панели.Он перекрывается, потому что он слишком велик, чтобы не прокручивать его вниз.

Вы можете поставить тот же стоп и изменить положение внизу, что и наверху.Когда вы прокручиваете до верха, он снова позиционирует себя.Попробуйте это и для нижнего колонтитула.