Jak przyklejać stały div wysokości więcej niż widok do ciała

Question

Wiem o pozycjonowaniu div (stałe, bezwzględne i względne). Mogę dołączyć ustalony element div do ciała, aby przy przewijaniu ciała przylegał on do tej samej pozycji. Tutaj zadaję trochę inne pytanie.

Mam pasek boczny z wysokością większą niż wysokość ekranu i chcę, aby był przymocowany do ciała. Podczas przewijania ciała, powinien on również przewijać, ale gdy dno stałego elementu div jest widoczne, nie powinno przewijać się wraz z ciałem.

Na przykład prawy pasek boczny ściany Facebooka przewija się wraz z ciałem i zatrzymuje przewijanie z ciałem, gdy widoczny jest dolny pasek prawego paska bocznego (stały).

Answer 1

Jest to możliwe poprzez umieszczenie sidebar absolutny i zmiany, które naprawić, gdy tylko pozycja przewijania okna przejdzie w dół.

CSS:

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

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'}); 
     } 
    }); 
}); 

I a demo.

Answer 2

Tu masz trzy tutoriale do zamierzonego zadania (pierwszy wyniki z google z zapytaniem: "Fixed sidebar na zwoju")

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/

Oto kod jednego z podejść:

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

Biorąc paska Facebook jako przykład wydaje się, że tak szybko, jak przewija przeglądarki pionowo do pewnego progu (w górnej części ekranu uderza szczyt końcowego reklamy w na pasku bocznym) zmienia klasę na pasku bocznym.

W tym miejscu ustawia pozycję css na ustaloną i ustawia górny styl na pasku bocznym - ??? px tak, że pojawia się przy tym progu nie poruszył się, ale po przewinięciu nie przewinie się więcej.

Można wykryć przesunięcie określonego elementu za pomocą funkcji scrollTop() jquery. http://api.jquery.com/scrollTop/

Answer 4

Z pozycji bezwzględnej (w stałej pozycji mamy do ukrycia przewijać i ustawić scrollTop zamiast góry):

$(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

Można to zrobić, testując scrollTop() na wysokości kontenerów.

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>