Jak zrobić element fałszywej pozycji: naprawiony, aby działał ustalony do pewnej wysokości przewijania, a następnie dołączał?

Question

Wiele witryn ma funkcję, w której element pojawia się na stronie podczas przewijania, NIŻ trafiłeś w konkretny punkt, na przykład na koniec paska bocznego, a następnie zakotwiczenia na dole tego paska bocznego. Po przewinięciu z powrotem zaczyna działać jak stały element, pozostając na ekranie podczas przewijania.

Jak to się nazywa i jak to się robi?

Answer 1

Możesz ustawić pozycję na bezwzględne i dołączone zdarzenie przewijania do strony iw tym przypadku zmienisz najwyższą wartość css na podstawie pozycji paska przewijania (w jQuery jest to scrollTop w czystym javascriptie powinno być podobne), a następnie dodajesz warunek ten top zmienia się tylko wtedy, gdy scrollTop jest mniejszy niż określona wartość, np. offset.top + wysokość paska bocznego.

Answer 2

Możesz użyć https://github.com/wduffy/jScroll, ale wiem, że nie jest to dokładnie to, czego szukasz, istnieje opóźnienie pomiędzy przewijaniem a wchodzącym w życie divem, ciągle musi grać nadrabianie zaległości.

źródłem kodu jest jQuery's .scroll() handler, więc jest to dobry punkt wyjścia. O ile mi wiadomo, nie ma oficjalnej nazwy tego efektu, ale widziałem, jak to opisywało wiele miejsc, teraz, gdy ktoś chce o tym wiedzieć, nie mogę przestać go szukać!

EDIT Oto co szukałem: Persistent Headers on CSS-Tricks

podstawami techniki Chris Coyier są html:

<article class="persist-area"> 
    <h1 class="persist-header"> 
    <!-- stuff and stuff --> 
</article> 

css:

.floatingHeader { 
    position: fixed; 
    top: 0; 
    visibility: hidden; 
} 

i jQuery:

function UpdateTableHeaders() { 
    $(".persist-area").each(function() { 

     var el    = $(this), 
      offset   = el.offset(), 
      scrollTop  = $(window).scrollTop(), 
      floatingHeader = $(".floatingHeader", this) 

     if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) { 
      floatingHeader.css({ 
      "visibility": "visible" 
      }); 
     } else { 
      floatingHeader.css({ 
      "visibility": "hidden" 
      }); 
     }; 
    }); 
} 

// DOM Ready 
$(function() { 

    var clonedHeaderRow; 

    $(".persist-area").each(function() { 
     clonedHeaderRow = $(".persist-header", this); 
     clonedHeaderRow 
     .before(clonedHeaderRow.clone()) 
     .css("width", clonedHeaderRow.width()) 
     .addClass("floatingHeader"); 

    }); 

    $(window) 
    .scroll(UpdateTableHeaders) 
    .trigger("scroll"); 

}); 

Answer 3

Słuchaj zdarzenia przewijania, gdy przewijasz obok elementu, który chcesz pozostać w widoku, zmieniasz elementy, do których pozycja jest "ustalona".

stworzyłem jsFiddle ilustrujący to: http://jsfiddle.net/luisperezphd/EcsS6/

Istnieje kilka rzeczy, o których warto pamiętać na przykład stałym elementem będzie miejsce w stosunku do okna lub pierwszego rodzica z position: relative.

Po drugie, gdy zmienisz element na fixed, zwija on miejsce, w którym znajdował się wcześniej, powodując przesunięcie zawartości poniżej. Jeśli chcesz, aby efekt wyglądał gładko, musisz umieścić coś w swoim miejscu, które zajmuje tyle samo miejsca, co w rzeczywistości.

W moim przykładzie z jsFiddle osiągnąłem to, owijając element nagłówka wewnątrz innego elementu, a następnie ustawiając jego wysokość, aby dopasować (programowo). Istnieje jednak kilka różnych sposobów, w jakie można to osiągnąć.

Mam zamiar również uwzględnić poniższy kod, w moim przykładzie używam jQuery.

JavaScript:

var $header = $("#header"); 
var HeaderOffset = $header.position().top; 
$("#headerContainer").css({ height: $header.height() }); 

$("#container").scroll(function() { 
    if($(this).scrollTop() > HeaderOffset) { 
     $header.addClass("fixedTop"); 
    } else { 
     $header.removeClass("fixedTop"); 
    } 
}); 

CSS:

#containerParent { 
    position: relative; 
    width: 180px; 
} 

#container { 
    height:200px; 
    overflow:auto; 
} 

#header { 
    background:black; 
    color:white; 
    width: 100%; 
} 

.fixedTop { 
    position: absolute; 
    top: 0; 
} 

Przykładowy HTML:

<h1>Fixed Position Header - after a point</h1> 
<div id="containerParent"> 
    <div id="container"> 
     This text is an example of content that might occur before the header. 
     <div id="headerContainer"> 
      <div id="header">Header</div> 
     </div> 
     <div> 
      Below is enough content to trigger scrolling. 
      line 1 <br/> 
      line 2 <br/> 
      line 3 <br/> 
      line 4 <br/> 
      line 5 <br/> 
      line 6 <br/> 
      line 7 <br/> 
      line 8 <br/> 
      line 9 <br/> 
      line 10 <br/> 
      line 11 <br/> 
      line 12 <br/> 
      line 13 <br/> 
      line 14 <br/> 
      line 15 <br/> 
     </div> 
    </div> 
</div>