Zawsze na wierzchu div wewnątrz obszaru

stworzyłem div, który jest zawsze na najwyższymZawsze na wierzchu div wewnątrz obszaru

.visibleDiv, #topLeft 
{ 
    position: fixed; 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

#topLeft 
{ 
    top: 10px; 
    left: 10px; 
}

I wyświetlić go jak tak

<div id="topLeft"> 
    Top Left 
</div>

Ale ja też mam div nazwie pojemnik. Chciałbym, aby topLeft pozostał w lewym górnym rogu tego kontenera zamiast lewego górnego rogu ekranu. Jestem całkiem nowy w CSS i od jakiegoś czasu drapię się po głowie, aby uzyskać taki efekt.

więc wytłumaczyć jaśniej chciałbym spróbować osiągnąć ten efekt

______________ 
|Other things| 
|____________| 
________________________________ 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        |

A kiedy przewijać chcę topleft się w lewym górnym rogu ekranu w ciągu karcie kontenera jak tak

|__________________   | 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        | 
|______________________________|

Jeśli ktoś mógłby wskazać mi właściwy kierunek lub pokazać mi, jak osiągnąć to z wyjaśnieniem, byłbym bardzo wdzięczny. Dziękuję każdemu z góry za pomoc lub przeczytanie tego posta.

Źródło

2011-12-23 Quillion

Powinieneś prawdopodobnie dodać znacznik 'javascript', ponieważ z pewnością nie można tego zrobić w samym CSS. – Wex

Ok, chcesz początkowo element znajdujący się w lewym górnym rogu kontenera, ale kiedy zaczniesz przewijać, chcesz go naprawić w lewym górnym rogu ekranu? – Purag

@Purmou Chcę, aby pozostała stała w lewym górnym rogu kontenera. Chciałem mieć coś takiego na http://papermashup.com/ tylko w ramach określonego tagu div. – Quillion

Po prostu dodaj pozycję: względem elementu kontenera.

zobaczyć ten fiddle

Aktualizuj

jQuery jest bardzo przydatna tutaj. Możesz go użyć do łatwego obliczenia, kiedy "kontener" trafi na szczyt portu widoku, a następnie ponownie przypisz klasę do elementu "topLeft", aby ją naprawić.

HTML

<div class="head"> 
Some Stuff 
</div> 
<div class="container"> 
    <div id="topLeft">Top Left Stuff</div> 
    Container Stuff 
</div>

CSS

.container 
{ 

    background-color:#FAA; 
    height:1000px; 
} 

#topLeft 
{ 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

.fixit 
{ 
    position:fixed; 

    top: 0px; 
}

JavaScript

<!-- Include jQuery Library --> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<!-- Wire Up Our Magic --> 
<script type='text/javascript'> 
$(window).load(function(){ 
$(window).scroll(function() { 
    if(($(".container").position().top - $(window).scrollTop()) <= 0) 
     { 
      $("#topLeft").addClass("fixit"); 
     } 
     else 
     { 
      $("#topLeft").removeClass("fixit"); 
     } 

    }); 
}); 

</script>

Zobacz go w akcji here

Źródło

2011-12-23 21:29:35

To jest dokładnie ten sam efekt, który ciągle dostaję. Problem polega na tym, że chcę, aby po przewinięciu strony i zniknięciu górnej części kontenera "Górny lewy akcent" znalazł się na górze ekranu. – Quillion

W takim przypadku potrzebujesz trochę javascriptu. –

Dziękuję bardzo, dokładnie tego właśnie szukałem. I nie miałem pojęcia, że mogę to zrobić za pomocą javascript. Wielkie dzięki za wspaniałą lekcję! – Quillion

Oto Fiddle http://jsfiddle.net/TSfLu/

Lewy górny komunikat byłby zawsze w tej pozycji i obejmowałby wszystko poniżej. Więc możesz odpowiednio ustawić zawartość na swojej stronie.

Źródło

2011-12-23 21:49:03 Virendra

Oops wydaje się, że Jon P opublikował już podobne rozwiązanie. – Virendra

Zawsze na wierzchu div wewnątrz obszaru

Odpowiedz

Powiązane problemy