Fermare lo scorrimento a posizione fissa a un certo punto?

94

Ho un elemento che è posizione: fisso e quindi scorre con la pagina come voglio comunque. quando l'utente scorre verso l'alto voglio che l'elemento smetta di scorrere a un certo punto, diciamo quando si trova a 250px dalla parte superiore della pagina, è possibile? Qualsiasi aiuto o consiglio sarebbe utile grazie!

Avevo la sensazione che avrei dovuto usare jquery per farlo. Ho provato a ottenere lo scorrimento o la posizione del punto in cui si trova l'utente ma sono rimasto davvero confuso, ci sono soluzioni jquery?

jquery  css  positioning 
— Louise McComiskey
fonte
1
Per quanto ne so, solo una soluzione basata su javascript farà quello che vuoi. Non esiste una soluzione CSS pura che lo faccia.
— cdeszaq

Risposte:

124

Ecco un rapido plug-in jQuery che ho appena scritto che può fare quello che ti serve:

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

Vedi esempio di lavoro →

— mVChr
fonte
Questo sembra promettente sì, è quello che pensavo cambiando il posizionamento in determinati punti, ti faccio sapere come sto grazie!
— Louise McComiskey
1
Ciao sì grazie mille con qualche tweek per esattamente quello che volevo e ora funziona perfettamente grazie ancora.
— Louise McComiskey
3
$('window')non dovrebbe essere tra virgolette. Ma grazie per questo, è stato molto utile.
— jeff
137

Intendi qualcosa di simile?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

Mostra snippet di codice

— James Montagne
fonte
Fantastico, grazie mille! Sebbene il mio compito fosse quello di creare il pulsante "In alto" che sarebbe sempre stato sopra il piè di pagina, ho modificato un po 'questo codice. Vedi la mia versione qui (js coffee): jsfiddle.net/9vnwx3fa/2
— Alb
@James Montagne - Quale sarebbe la soluzione per invertire questo codice se volessi l'elemento fisso fondo appiccicoso: 0; su scroll e poi fermarsi a 250px prima che arrivi in ​​fondo alla pagina?
— BoneStarr
1
@ BoneStarr è un po 'più complesso. Dovresti confrontare lo scrollTop corrente con l'altezza della pagina e il viewport. Quindi useresti semplicemente lo stesso codice sopra, tranne con bottome questo valore calcolato (offset di 250) nel max.
— James Montagne
@JamesMontagne - C'è qualche possibilità che potresti approfondire su questo violino? Lo apprezzerei davvero perché sono bloccato con questo. jsfiddle.net/Hf5wH/137
— BoneStarr
1
@bonestarr Notevolmente più complicato di questo. Dovresti espanderlo su più righe di codice o è davvero difficile da capire. jsfiddle.net/Hf5wH/139
— James Montagne
19

Ecco un plugin jquery completo che risolve questo problema:

https://github.com/bigspotteddog/ScrollToFixed

La descrizione di questo plugin è la seguente:

Questo plugin viene utilizzato per fissare gli elementi nella parte superiore della pagina, se l'elemento fosse uscito dalla visualizzazione, verticalmente; tuttavia, consente all'elemento di continuare a spostarsi a sinistra oa destra con lo scorrimento orizzontale.

Data un'opzione marginTop, l'elemento smetterà di muoversi verticalmente verso l'alto una volta che lo scroll verticale avrà raggiunto la posizione di destinazione; ma l'elemento si sposterà comunque in orizzontale mentre la pagina scorre a sinistra oa destra. Una volta che la pagina è stata fatta scorrere indietro oltre la posizione di destinazione, l'elemento verrà ripristinato nella sua posizione originale sulla pagina.

Questo plugin è stato testato in Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Utilizzo per il tuo caso particolare:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});
— bigspotteddog
fonte
1
Grazie sì, sembra davvero utile, ho usato una risposta precedente poiché questo progetto era un paio di mesi fa, tuttavia lo terrò sicuramente a mente per progetti futuri, sembra più facile, grazie :)
— Louise McComiskey
6

Puoi fare quello che James Montagne ha fatto con il suo codice nella sua risposta, ma questo lo farà tremolare in Chrome (testato in V19).

Puoi rimediare se metti "margin-top" invece di "top". Non so davvero perché funziona con margin tho.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

— Jure Ravlić
fonte
Funziona benissimo anche per gli elementi fissi sotto il testo, ho riscontrato un problema serio con schermi piccoli e gli elementi di scorrimento fissi vengono eseguiti nella parte superiore del browser su aree più piccole come 1024x768. Questo ha risolto il problema.
— Joshua
2

la mia soluzione 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
— user3288218
fonte
2

In un progetto, in realtà ho un'intestazione fissata nella parte inferiore dello schermo al caricamento della pagina (è un'app di disegno, quindi l'intestazione è in basso per dare il massimo spazio all'elemento canvas su un'ampia vista).

Avevo bisogno che l'intestazione diventasse "assoluta" quando raggiunge il piè di pagina durante lo scorrimento, dal momento che non voglio che l'intestazione sopra il piè di pagina (il colore dell'intestazione è uguale al colore di sfondo del piè di pagina).

Ho preso la risposta più vecchia qui (a cura di Gearge Millo) e lo snippet di codice ha funzionato per il mio caso d'uso. Con un po 'di gioco ho ottenuto che funzionasse. Ora l'intestazione fissa si trova magnificamente sopra il piè di pagina una volta raggiunto il piè di pagina.

Ho solo pensato di condividere il mio caso d'uso e come ha funzionato, e dire grazie! L'app: http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
— Joseph Falconer
fonte
1

Ho scritto un post sul blog su questo che presentava questa funzione:

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
— Nathan McGinness
fonte
0

Una soluzione che utilizza Mootools Framework.

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. Ottieni la posizione (x & y) dell'elemento in cui vuoi interrompere lo scorrimento usando $ ('myElement'). GetPosition (). X

    $ ('myElement'). getPosition (). y

  2. Per una sorta di animazione di scorrimento usa:

    new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();

  3. Per impostare lo scorrimento immediatamente, utilizzare:

    new Fx.Scroll (myElement) .set (x, y);

Spero che questo ti aiuti !! : D

— Zohaib
fonte
0

Mi è piaciuta questa soluzione 

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

il mio problema era che dovevo occuparmi di un contenitore relativo alla posizione in Adobe Muse.

La mia soluzione:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
— leu
fonte
0

Codice mVChr appena improvvisato

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
— Sreeraj
fonte
Il motivo per memorizzare $(this)e $(window)in variabili è che devi solo fare $this.height()e così via. Invece di impostare una posizione superiore, non sarebbe meglio se il plug-in memorizzasse il valore superiore originale e lo ripristinasse quando si imposta una larghezza fissa? Inoltre, cosa intendi con Just improvised mVChr code?
— Cyclonecode
0

Ho adattato la risposta di @ mVchr e l'ho invertita per utilizzarla per il posizionamento degli annunci persistenti: se ne hai bisogno in posizione assoluta (scorrimento) fino a quando la spazzatura dell'intestazione non è fuori dallo schermo, ma poi ne hai bisogno per rimanere fissa / visibile sullo schermo dopo di che:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS:

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
— cbmtrx
fonte
0

Mi è piaciuta molto la risposta di @james ma stavo cercando la sua inversa, ovvero fermare la posizione fissa subito prima del piè di pagina, ecco cosa ho trovato

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

Quindi ora l'elemento fisso si fermerebbe subito prima del piè di pagina. e non si sovrapporranno ad esso.

— mshahbazm
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.