Sticky scroller bannert üzemeltem be egy WP oldalon (localhost, így url-t nem tudok mutatni sajnos), de a benne megadott banner háttérszíne Chrome-ban, és Operában csak akkor jelenik meg, ha a banner már fix pozícióba került, azaz amíg meg nem áll a "fixed" pozícióban, addig nem. FF-ban már előbb, scrollozás indításakor jelenik meg a banner háttérszíne körben, de egyből ott sem.
Mi lehet a gond?
A kód ez, az instrukciók szerint a headerben kellett elhelyezni. Funkcionálisan tökéletesen megy, de háttérszín nem töltődik be egyből.
Mi lehet a baj?Idézet:
<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 = $('#text-4'); //ez a nem fixed utolsó pozíció ID-je
var sticky = $('#text-3'); //ez a fixed pozíció ID-je
$(window).scroll(function() {
if(isScrolledTo(sticky)) {
sticky.css('position','fixed');
sticky.css('top','70px');
sticky.css('background-color','#0085A3');
}
var stopHeight = catcher.offset().top + catcher.height();
if ( stopHeight > sticky.offset().top) {
sticky.css('position','absolute');
sticky.css('top',stopHeight);
sticky.css('background-color','#0085A3');
sticky.css('z-index','0');
});
});
</script>
