addClass und delay

[Tobi44]

Hallo,

ich nutze folgendes Script, um eine Seitennavigation am oberen Seitenrand einzublenden, wenn der Besucher so weit in die Ergebnisse gescrollt hat, dass die normale Seitennavigation nicht mehr sichtbar ist. Ich möchte nun aber, dass diese nicht direkt kommt, wenn man die feste Seitennavigation aus dem sichtbaren Bereich scrollt, sondern dass sie erst nach 1.5 Sekunden ins Bild rutscht.

Ich habe bereits ein .delay(1500) vor das addClass gesetzt, allerdings ist die Navi immer gleich da...

$(window).load(function () {
  var top = $('.pag1').offset().top - parseFloat($('.pag1').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
      $('.pag1').addClass('fixed');
    } else {
      $('.pag1').removeClass('fixed');
    }
  });
});

Was habe ich hier wieder nicht verstanden?

Danke.

 

[Sentence]

Moin,
das geht zumindest mit setTimeout.

...
if (y >= top) {
  setTimeout(
  function()
  {
  $('.pag1').addClass('fixed');
  }, 1500);
  } else {
...

MfG

 

[Tobi44]

Danke. Ich glaube aber, ich muss noch nach einer Möglichkeit suchen, die Navigation nach einer kurzen Zeit sanft einzublenden und nicht mit einem Schlag reinzuhauen.
Das genannte Beispiel funktioniert gut.

Danke & Gruß

 

[scbawik]

Danke. Ich glaube aber, ich muss noch nach einer Möglichkeit suchen, die Navigation nach einer kurzen Zeit sanft einzublenden und nicht mit einem Schlag reinzuhauen.
Das genannte Beispiel funktioniert gut.

Danke & Gruß

CSS3 transitions?

 

[Sentence]

Moin,
mit fadeIn()? Dann evtl. so

$(window).load(function () {
  var top = $('.pag1').offset().top - parseFloat($('.pag1').css('marginTop').replace(/auto/, 0));
  var faded = false;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
      if (!faded) {
        faded = true;
        $('.pag1').hide().addClass('fixed').fadeIn(1500);
        }
    } else {
      $('.pag1').removeClass('fixed');
      faded = false;
    }
  });
});

MfG

 

[scbawik]

Moin,
mit fadeIn()? Dann evtl. so

$(window).load(function () {
  var top = $('.pag1').offset().top - parseFloat($('.pag1').css('marginTop').replace(/auto/, 0));
  var faded = false;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
      if (!faded) {
        faded = true;
        $('.pag1').hide().addClass('fixed').fadeIn(1500);
        }
    } else {
      $('.pag1').removeClass('fixed');
      faded = false;
    }
  });
});

MfG

Ein addClass schreit mMn geradezu nach transitions.