Question

当用户滚动浏览时，我想要一个圆圈div来锁定标题。

我正在使用以下代码，但它不起作用

WHERE phone LIKE '%$newNumber%'

我想在用户滚动传递圆圈div时执行操作;但是，上面的代码似乎不起作用。 oCircleBottom是否正确计算？

Answer 1

将您的代码包含在$（document）.ready function

中

$(document).ready(function () {
    var circle$ = $('.circle'),
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
    window$ = $(window);

    window$.scroll(function () {
    if (window$.scrollTop() > oCircleBottom) {
        $('.circle').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } 
    else{
               $('.circle').css({                      
                position: 'static'});
    }
  }.bind(this));

});

Answer 2

您需要考虑窗口高度，因为如果页面的高度不足以向下滚动，则代码无效。看看this example

但是，如果增加页面高度，您的代码将正常工作而不会减去窗口高度。看看this example

因此，最好减去窗口高度。 jsFiddle

  $(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
       //Do you stuff
    }
});

当窗口滚动过元素时，在标题上锁定div

2 个答案: