jquery – 修复了两个div元素之间的div

前端之家收集整理的这篇文章主要介绍了jquery – 修复了两个div元素之间的div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当滚动位置在两个div元素之间时,我尝试创建一个固定的div元素.我使用此代码来创建固定元素:
var sidebar = $('.sidebar').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > sidebar) {
        $('.sidebar').addClass('fixed');
    }else{
        $('.sidebar').removeClass('fixed');
    }
});

当蓝色div达到时,我不知道如何删除固定类.我试图获取蓝色div的当前位置并将其添加到if语句:
var blueDiv = $(‘.bottom’).offset().top:

if ($(window).scrollTop() > sidebar && $(window).scrollTop() < blueDiv ){
    // add fixed class
}else{
    // remove fixed class
}

小提琴:https://jsfiddle.net/L7p5yeet/

解决方法

当您检查侧边栏是否已到达蓝色div时,您忘记包括侧边栏的高度:
var sidebar = $('.sidebar').position().top;
var blueDiv = $('.bottom').position().top - $('.sidebar').innerHeight();

$(window).scroll(function() {
    var sT = $(window).scrollTop();
    if (sT > sidebar && sT < blueDiv) {
        $('.sidebar').addClass('fixed');
    }else{
        $('.sidebar').removeClass('fixed');
    }
});

猜你在找的jQuery相关文章