Come prevenire il salto dei contenuti dopo aver aggiunto la posizione: fissata alla sottovoglia?

Question

Attualmente sto lavorando al mio nuovo portfolio puoi vedere qui: http://katharinakoeth.de/neu/ . E c'è già il mio problema.Come puoi vedere, ho aggiunto un po 'di azione jquery alle mie sottotelle (sono davvero un principiante quando si tratta di JavaScript) per cambiare la sua posizione da ereditare a fissare / appiccicoso .. Ma quando succede il cambiamento, il mio contenuto salta a causa dilo spazio improvviso. »È più ovvio con le" persone che mi piace lavorare con "... la prima persona scompare improvvisamente non appena la sottotata diventa appiccicosa.

C'è un modo per aggiungere spazio extra o impedire il salto in un altro modo?

Answer 1

Quando si modificano quei sottotivatori in posizione: fissati, vengono rimossi dal flusso del documento.Hanno un margine inferiore: 75px che viene anche rimosso dal flusso quando ciò accade.

Prova a cambiarlo in un margine-top: 75px all'inizio dei blocchi sotto ogni sottovoce;Ciò non "scompare" quando le sottotitoli cambiano i valori di posizione, quindi la spaziatura deve essere conservata.

Answer 2

FYI, your fix.js file could probably be refactored down to something like this:

var $titles = $("header h2");
$(window).scroll(function(){

    var win_top = $(this).scrollTop();
    $titles.each(function(){
        var div_top1 = $(this).offset().top;
        if (win_top > div_top) $(this).addClass('stick')
        else $(this).removeClass('stick');
    });

});