Utilisation de jQuery pour continuer à faire défiler l'objet dans une fenêtre visible

J'étais en train d'écrire une description longue de ce que je voulais faire, quand j'ai réalisé que le "Comment Poser /Format" encadré sur ce même "Poser Une Question" de la page ne exactement ce que je veux.

Fondamentalement, c'défiler vers le haut et vers le bas à l'unisson avec le reste de l'écran, le fait de rester alignée en haut avec la section principale, à moins que la section principale commence à défiler en haut de la fenêtre visible. À ce moment, la barre latérale de la boîte de cesse de défiler, et commence à agir comme si sa position absolue, contre le haut de la fenêtre visible.

J'ai essayé de creuser dans le code source et des scripts sur cette "Demander" de l'écran, mais il y a tellement de choses que c'est à peu près impossible (pour moi, au moins). Je suis en supposant que jQuery en fait, fait ce genre de chose assez simple, mais je suis nouveau, donc je vais avoir un moment difficile essayer de le comprendre par moi-même. (Et si cela s'avère être une question commune, toutes mes excuses -- j'ai cherché pendant une heure environ, mais il y a donc de nombreux de près le libellé de jQuery questions que je n'ai pas été en mesure de creuser une réponse.)

Merci d'avance pour toute aide.

source d'informationauteur Laurent Stanevich | 2011-03-11

  1. 29

    C'est un exemple pour un shoppingcart Apple a sur l'Applestore Page.

    La logique:

    • vérifier si le collant élément est
    • vérifier sur le défilement cas où la fenêtre du haut est
    • d'ajouter ou de supprimer de la classe CSS à l'
      collant élément

    Le jQuery:

    $(document).ready(function() {  
 //check where the shoppingcart-div is  
 var offset = $('#shopping-cart').offset();  

 $(window).scroll(function () {  
   var scrollTop = $(window).scrollTop(); //check the visible top of the browser  

   if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');  
   else $('#shopping-cart').removeClass('fixed');  
  });  
});

    Le CSS:

    .fixed {  
        position: fixed;   
        top: 20px;  
        margin-left: 720px;  
        background-color: #0f0 ! important; }

    exemple de Lien

  2. 2

    Voici un petit extrait que je viens de fouettée en place pour garder un objet sur l'écran pendant le défilement.

    DÉMONSTRATION EN DIRECT

    http://jsfiddle.net/Jaybles/C5yWu/

    HTML

    <div id='object'>Top: 0px</div>

    CSS

    #object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}

    jQuery

    $(window).scroll(function(){
    var objectTop = $('#object').position().top;
    var objectHeight = $('#object').outerHeight();    
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    if  (windowScrollTop  > objectTop)
        $('#object').css('top', windowScrollTop );
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
        $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);        

    $('#object').html('Top: ' + $('#object').position().top + 'px');

});

    Mise à JOUR de l'EXEMPLE (Avec Minuterie + Animation)

    http://jsfiddle.net/Jaybles/C5yWu/2/

  3. 0

    si vous avez besoin de le garder sur le bas de l'utiliser comme ceci
    jQuery

    $(document).scroll(function() {
    var objectTop = $('#shopping-cart').position().top;
    var objectHeight = $('#shopping-cart').outerHeight();  
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

   if((objectTop+objectHeight) <=  $('html').outerHeight())
       $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight);
   else
       $('#'+cont).css('top', $('html').outerHeight()- objectHeight);
});

    Css

    #shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

    si vous avez besoin de garder sur le dessus de l'utiliser comme ceci
    jquery

    $(document).scroll(function() {
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    $('#shopping-cart').css('top', windowScrollTop );

});

    Css

    #shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
}

    il va faire de la magie et n'oubliez pas de garder vos styles avec les positions, et une chose que sa fonctionne pas avec internet explorer 8.0.7

  4. 0

    Et si vous avez seulement besoin de tenir la div dans un certain endroit du navigateur que vous n'avez pas besoin de javascript, vous pouvez le faire avec les CSS.

    #chatt-box {
    right: 5px;
    height: auto;
    width: 300px;
    position: fixed;
    bottom: 0px;
}