Question

我在谈论这个网站上留有adsense的左边区块：http://www.smejemsa.sk/obrazky/blondinka-v-autoskole/ position: fixed在这种情况下不是一个好选择，或者我不知道如何在CSS中写这个前两个display: inline-block; position: relative，最后两个position: absolute。

我使用此javascript移动带有广告的左侧块 - 但是滚动速度较快存在问题当我滚动得更快时，块的位置会随机调整。任何想法？
我愿意用position: fixed写这个，但我不知道怎么做。

$(document).scroll(function() {
    var pomocna=$(document).scrollTop();
    var vyska=pomocna-315;
    var skrol=$('#content-wrapper').height();

    if ((pomocna <= (skrol-380)) && (pomocna>=310))
        $('#ad-left').css('top',vyska);
});

Answer 1

这样的事情怎么样：

var $left = $('.left-part'),
    leftOff = $left.offset().top,
    leftHeight = $left.height(),
    rightHeight = $('.right-part').height(),
    bottomAlign = rightHeight - leftHeight + leftOff;
$(window).scroll(function(){
    var winScroll = $(window).scrollTop();
    if(winScroll >= leftOff && winScroll < bottomAlign){
        $left.addClass('fixed').removeClass('bottom')
    }else if(winScroll >= bottomAlign){
        $left.removeClass('fixed').addClass('bottom')
    }
    else{
        $left.removeClass('fixed bottom')
    }
})

由于我不喜欢在JS中使用固定数字，所以一切都在计算中。

这是一个有效的演示：JSFiddle

CSS中的重要部分只有：

#content { position: relative;} 
.left-part { position: absolute; top: 0; left: 0; }
.left-part.fixed { position: fixed; left: auto; }
.left-part.bottom { top: auto; bottom: 0; }

向下和向上滚动时阻止浮动

1 个答案: