位置:在侧边栏中固定-如何在页脚之前停下来?

问题描述

我在侧边栏中使用jQuery进行浮动小部件-链接到我的帖子 http ://www.product-investigation.com/fat-loss-factor-review -如果向下滚动，您会明白我的意思..我想在页脚之前停止侧栏中的adsense小部件.寻求帮助:)

I am using jQuery for floating widget in my sidebar - link to my post http://www.product-investigation.com/fat-loss-factor-review - if you scroll down, you can see what I mean ..I want to stop my adsense widget in sidebar before footer..thanks for help :)

我的JavaScript

My javascript

<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop <= docViewTop));
        }
        var catcher = $('#catcher');
        var sticky = $('#sticky');
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css('position','fixed');
                sticky.css('top','100px');
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight > sticky.offset().top) {
                sticky.css('position','absolute');
                sticky.css('top',stopHeight);
            }
        });
    });
    </script>

推荐答案

我已经更新了您的 jsfiddle .我已根据您的条件进行了更改:

I've updated your jsfiddle. I changed something in your conditions:

return ((elemTop <= docViewTop || elemTop >= docViewTop)); //Changed your return in isScrolledTo

说明:我在下面添加的代码会将sticky div放置在footer的顶部，如果我使用原始的return语句并向上滚动，则sticky div的位置仍为<footer顶部的c4>.这是因为您的return语句将仅检查元素的top位置是否小于或等于scrollTop()值，该值只能在scrolldown期间使用.对于sticky已经在底部的情况，isScrolledTo()还应该检查sticky div的top是否大于或等于scrollTop()值.

Explanation: The code that I added below will position the sticky div at the top of the footer, If I use your original return statement and scroll up, the sticky div's position will still be absolute on top of the footer. It's because your return statement will only check if the top position of the element is less or equal to the scrollTop() value, which can only be used during scrolldown. In my case where the sticky is already at the bottom part, the isScrolledTo() should also check if the top of the sticky div is greater or equal to the scrollTop() value.

并在.scroll()

$(window).scroll(function() {
    if(isScrolledTo(sticky)) {
      sticky.css('position','fixed');
      sticky.css('top','2px');
    }
    var stopHeight = catcher.offset().top + catcher.height();
    var stickyFoot = sticky.offset().top + sticky.height();

    if(stickyFoot > footTop -10){ //Check if sticky's foot passes footer's top
      console.log("Top of Footer");
      sticky.css({
        position:'absolute',
        top: (footTop - 20) - sticky.height()
      });
    } else {
      if ( stopHeight > sticky.offset().top) {
        console.log("Default position");
        sticky.css('position','absolute');
        sticky.css('top',stopHeight);
      }
    }
});

希望有帮助.

这篇关于位置:在侧边栏中固定-如何在页脚之前停下来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！