У меня в моем документе пять div, я хочу, чтобы после прокрутки div фиксировались, когда они достигают определенной позиции (например, 100 пикселей), но некоторые div становятся фиксированными только тогда, когда они превышают эту позицию. Я пробовал с 0px это то же самое, но проблема более заметна с 100px, может кто-нибудь поможет мне исправить эту проблему
CSS
#f1{
width:600px;
z-index:1;
}
#f2{
width:600px;
z-index:2;
}
#f3{
width:600px;
z-index:3;
}
#f4{
width:600px;
z-index:4;
}
#f5{
width:600px;
z-index:5;
}
.fixed{
position:fixed;
top:100px;
}
JS
$( document ).ready(function() { var f1 = $('#f1').offset().top ; var f2 = $('#f2').offset().top ; var f3 = $('#f3').offset().top ; var f4 = $('#f4').offset().top ; var f5 = $('#f5').offset().top ; $(window).scroll(function (event) { var y = $(this).scrollTop()+100; if (y >= f1) { $('#f1').addClass('fixed'); } else { $('#f1').removeClass('fixed'); } if (y >= f2) { $('#f2').addClass('fixed'); } else { $('#f2').removeClass('fixed'); } if (y >= f3) { $('#f3').addClass('fixed'); } else { $('#f3').removeClass('fixed'); } if (y >= f4) { $('#f4').addClass('fixed'); } else { $('#f4').removeClass('fixed'); } if (y >= f5) { $('#f5').addClass('fixed'); } else { $('#f5').removeClass('fixed'); } }); });
HTML
<div style="width:600px; margin:0 auto; background:#ccc">
<p>
some long text here
</p>
<div id="f1" style="background:#000; color:#fff">
div 1
</div>
<p>
some long text here
</p>
<div id="f2" style="background:#000; color:#fff">
div 2
</div>
<p>
some long text here
</p>
<div id="f3" style="background:#000; color:#fff">
div 3
</div>
<p>
some long text here
</p>
<div id="f4" style="background:#000; color:#fff">
div 4
</div>
<p>
some long text here
</p>
<div id="f5" style="background:#000; color:#fff">
div 5
</div>
<p>
some long text here
</p>
</div>
вы можете увидеть результат здесь http://jsfiddle.net/hPs6p/
Я нашел эту проблему сам, так что спасибо всем
JS
$( document ).ready(function() { $(window).scroll(function (event) { var y = $(this).scrollTop()+100; var f1 = $('#f1').offset().top ; var f2 = $('#f2').offset().top ; var f3 = $('#f3').offset().top ; var f4 = $('#f4').offset().top ; var f5 = $('#f5').offset().top ; if (y >= f1) { $('#f1').addClass('fixed'); } else { $('#f1').removeClass('fixed'); } if (y >= f2) { $('#f2').addClass('fixed'); } else { $('#f2').removeClass('fixed'); } if (y >= f3) { $('#f3').addClass('fixed'); } else { $('#f3').removeClass('fixed'); } if (y >= f4) { $('#f4').addClass('fixed'); } else { $('#f4').removeClass('fixed'); } if (y >= f5) { $('#f5').addClass('fixed'); } else { $('#f5').removeClass('fixed'); } }); });
это js решает проблему
смещение div1, div2, div3, div4 и div 5 было подсчитано за один раз до запуска события прокрутки, и когда div1 стал фиксированным, он вышел из потока, и поэтому для другого div решение должно вычислить смещение div в событии прокрутки для получить реальное смещение после того, как некоторые элементы станут из потока
Вам нужно исправить каждую прокрутку, например
if(scrollTop>200){
$('#header').css({ 'position': 'fixed', 'top' : '0' });
}
else{
$('#header').css({ 'position': 'relative', 'top': '200px'});
}
if(scrollTop>300){
$('#header2').css({ 'position': 'fixed', 'top' : '100px' });
}
else{
$('#header2').css({ 'position': 'relative', 'top': '400px'});
}
Вы можете использовать этот плагин для исправления элемента, который вам нравится: https://github.com/gwdhost/SnapToTop