Come attaccare il div fisso di altezza più di una finestra sul corpo

Question

Conosco il posizionamento di div (fisso, assoluto e relativo). Posso attaccare un div fisso al corpo in modo che si attacchi alla stessa posizione durante lo scorrimento del corpo. Qui sto facendo una domanda un po 'diversa.

Ho una barra laterale con altezza superiore all'altezza del viewport e voglio che sia fissata al corpo. Mentre scorre il corpo, dovrebbe anche scorrere, ma una volta che il fondo del div fisso è visibile, non dovrebbe scorrere insieme al corpo.

Ad esempio, la barra laterale destra del muro di Facebook scorre insieme al corpo e smette di scorrere con il corpo una volta visibile il fondo della barra laterale destra (fisso).

Answer 1

Questo è possibile, sistemando sidebar assoluta e di cambiamento che da sistemare non appena la posizione di scorrimento delle finestre passa in basso.

Il CSS:

#sidebar { 
    height: 120%; 
    width: 100px; 
    border: 2px solid blue; 
    padding: 20px; 
    margin: 20px; 
    position: absolute; 
    top: 0; 
} 

Il jQuery:

$(document).ready(function() { 
    var bottomPos = $('#sidebar').outerHeight(true) - $(window).height(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > bottomPos) { 
      $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'}); 
     } else { 
      $('#sidebar').css({'position':'absolute','top':'0px'}); 
     } 
    }); 
}); 

E a demo.

Answer 2

Qui si hanno tre tutorial per l'attività prevista (primi risultati di Google con query: "barra laterale fissa sul rotolo")

http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://css-tricks.com/scrollfollow-sidebar/

Ecco il codice per uno degli approcci:

CSS

#page-wrap { 
    width: 600px; 
    margin: 15px auto; 
    position: relative; 
} 

#sidebar { 
    width: 190px; 
    position: fixed; 
    margin-left: 410px; 
} 

jQuery

$(function() { 

    var $sidebar = $("#sidebar"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 

}); 

Answer 3

Prendendo la barra laterale di Facebook come un esempio sembra che non appena i rotoli del browser in verticale ad una certa soglia (la parte superiore dello schermo colpisce la parte superiore dell'annuncio finale la barra laterale) cambia la classe nella barra laterale.

A questo punto imposta la posizione css su fisso e imposta uno stile superiore sulla barra laterale di - ??? px in modo che appaia a quella soglia non sia stata spostata ma quando si scorre verso il basso non scorrerà più.

È possibile rilevare l'offset di un particolare elemento utilizzando la funzione jquery scrollTop(). http://api.jquery.com/scrollTop/

Answer 4

Con posizione assoluta (in posizione fissa dobbiamo nascondere scorrere e impostare scrollTop anziché in alto):

$(document).scroll(function() { 
 
    var offset = $(this).scrollTop() + $(window).height() - $('#sidebar').outerHeight(); 
 
    $('#sidebar').css('top', Math.max(0, offset)); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#content { 
 
    height: 2000px; 
 
    padding-right: 40%; 
 
    background: red; 
 
} 
 

 
#sidebar { 
 
    height: 1000px; 
 
    position: absolute; 
 
    width: 40%; 
 
    top: 0; right: 0; 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"></div> 
 
<div id="sidebar"></div>

fiddle

Answer 5

È possibile eseguire il test scrollTop() contro le altezze dei contenitori.

var $sidebar = $("#sidebar"), 
 
     $window = $(window), 
 
     offset  = $sidebar.offset(), 
 
     topPadding = 50, 
 
     calc= 0, 
 
     max = 0; 
 

 
$window.scroll(function() { 
 
    calc = $window.scrollTop() + $sidebar.height() + offset.top; 
 
    if(calc > $('#main').height()) { 
 
      max = $('#main').height() - $sidebar.height(); 
 
      $sidebar.stop().css('marginTop', max); 
 
    } else if ($window.scrollTop() > offset.top) { 
 
     $sidebar.stop().animate({ 
 
     marginTop: $window.scrollTop() - offset.top 
 
     }); 
 
    } else { 
 
     $sidebar.stop().animate({ 
 
     marginTop: 0 
 
     }); 
 
    } 
 
});

#wrapper { 
 
    width: 100%; 
 
} 
 

 
#main, #more { 
 
    width:70%; 
 
    background-color: black; 
 
    color:white; 
 
    height: 900px; 
 
    float:left; 
 
} 
 

 
#more { 
 
    background-color: red; 
 
} 
 
p { 
 
    margin-top:50%; 
 
} 
 
#sidebar { 
 
    width:30%; 
 
    background-color: blue; 
 
    color:white; 
 
    height: 500px; 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="main"> 
 
     <p>Main Content</p> 
 
    </div> 
 
    <div id="sidebar"> 
 
     <p>Sidebar</p> 
 
    </div> 
 
    <div id="more"> 
 
     <p>More Content</p> 
 
    </div> 
 
</div>