14 svar · 906 visningar · startad av haider
Hej!
Jag har sett tooltip-script som poppar fram div-fönster som har en fin egenskap. Nämligen att fönstrena inte hamnar utanför den synliga explorer-ytan.
Min fråga är hur jag går tillväga för att göra något liknande.
Jag har ett lager som befinner sig ca 70px nedanför sidans topp.
Medan man scrollar ner så förflyttar sig denna div uppåt förstås, men stannar kvar när den når toppens gräns. Som en sticky-tooltip alltså :)
Har någon något knep?
Tack i förhand!
position: fixed;
Hej Andreas,
nej, du missförstod mig.
när div:en når toppen av sidan, så vill jag att den ska stanna kvar där hur mycket jag än scrollar.
Först när jag scrollar tillbaka, så hamnar den rätt.
Den förblir sticky på sidans ovandel. Man kan alltså inte tvinga den att scrolla upp annat än de första 70 pixlarna tills den når sidans topp.
Är du med?
Är det ingen som vet?
Ta en titt på den bifogade filen. Det är ett javascript.
Där så finns en parameter som heter 'windowlock'.
Jag klarar inte att utläsa den kod jag är på jakt efter. I scriptet så används sticky funktionen till att förhindra att div:en som skapas hamnar utanför skärmen om man flyttar runt muspekaren.
Det är en mycket smart grej och jag tänkte att man hade kunnat göra ett likadant hinder vid scroll.
Om jag är otydlig i mitt första inlägg, så vänligen skriv det och jag skickar med en skärmdump.
jag väntar med spänning! (y)
Jag känner mig lite tjatig med detta, men en knuff i rätt riktning vore högst önskvärt.
Detta känns som en ganska simpel grej, så för den som kan bör detta gå att finna en lösning till rätt fort - eller är det komplicerat?
Har jag förstått dig rätt om jag säger att du vill ha en div som sitter kvar på stället den är satt oavsätt om du scrollar? Alltså som en top_frame fast med hjälp av css? :q
Hej Tillmar!
Ungefär så, men lite mer utvecklat. Den får lov att scrolla lite, tills den "slår i" sidans överkant.
Från början är div:ens överkant placerad ca 70 px nedanför sidans överkant. När man scrollar upp så närmar sig div:en sidans överkant sakta men säkert.
Om du besöker http://boxover.swazz.org/example.html så kan du se att de div:ar som poppar upp rör sig med musen. Men de stannar till när de når sidans utkant.
Jag vill kunna göra något liknande.
Under tiden, kan du beskriva hur man gör det du nämnde först, att div:en sitter kvar på stället där den satt oavsett scrollning.
tack så länge :)
Jag vet inte själv hur det funkar, gjorde förklaring mer så att annat folk kanske skulle förstå mer hur du menar. Men det som jag pratade om först verkar va något liknande som beskrivs på denna sidan
http://jessey.net/simon/articles/007.html
Där är sidebaren(menyn) fixerad och sträker ut sig beroende på fönstrets höjd och hamnar aldrig utanför, och stannar kvar på sin plats när man scrollar.
Kan ju vara en bit på vägen iallfall :)
Får be om ursäkt ifall något är oförståligt är inte mitt nyktraste tillstånd :bire
Googla "persistent layers" ;)
Tack Danne!
Aha, så det är så de heter. Har stött på dessa.
Hela min idé grundar sig på att jag vill ha en persistent layer men när jag såg det exempel som tillmar kom med så vet jag att jag ville ha den statiska metoden.
Det lilla extra jag ville ha var att den skulle vara statisk från början, men när man scrollar och den håller på att gå ur skärmen, så skulle den förflyttas i relation till sidans överkant.
Frågan är om det ens går?
Om du tar en titt på http://boxover.swazz.org/example.html som jag nämnde tidigare.
Om du förminskar fönstret till en viss grad att du vet att en popup som kommer fram riskerar att hamna utanför skärmen så ska du se hur den interaktivt förhindrar det.
Interaktiviteten kanske bara finns när man driver div:en med mus, inte med scroll?
Ser emot din feedback!
Hej!
Nu kanske du redan har löst problemet, men jag kluddrar ner lite tankar ändå.
Koden för Javascript han har gjort ligger här: http://boxover.swazz.org/boxover.js
Det kan vara lurigt att få ut det väsentliga. Men följande egenskaper är nyckeln till att få funktionen att fungera.
* Lagrets bredd
* Lagrets höjd
* Skärmens bredd
* Skärmens höjd
* Muspekarens position (x, y)
Därefter är det en fråga om lite grundmatte för att positionera lagret rätt, men ett exempel.
Om Lagret går efter cursor-position som är x: 480px, y:400px.
Lagret är 200px brett och 200px högt
Fönstret är 500px brett samt 480px högt
För att lagret inte ska gå utanför vänsterkant så tar vi (fönsterbredd - (xposition + lagerbredd)) och får i detta fall resultatet -180 och där ska vi placera lagrets vänsterkant.
Samma princip bör fungera även om muspekarens position inte är aktuellt och det är lagrets position kontra scrollposition.
Jag tror jag är rätt ute här, men annars så är det bara att skrika till så ska jag ta mig tid när jag har det lite lugnare.
Tjena Koplik!
helt klart bättre sent än aldrig :) tack!
tack för ditt svar.
Om vi alltså bortser från muspekarens position helt o hållet. Kan man få scrolldata lika precist som muspositionsdata? jag menar, så snart du rör på musen så uppdateras datan. Är scrolldatan lika exakt?
Kan du hitta den kodsnutt som hanterar just sticky ('windowlock' som den heter inne i js-filen) funktionaliteten och därmed förhindrar en div som skapats med så den scrollar ett tag men sen fastnar när den "slår i" sidans överkant.
- Just detta med att den slår i sidans överkant, är det begripligt vad jag menar?
tack i förhand - jag håller tummarna på att det går att göra som jag tänkte mig.
edit: detta är en kul sida:
http://www.yourhtmlsource.com/examples/positioning2.html
Minska ner fönstret
Titta på den gröna rutan. Den sitter statiskt på sidan. När man scrollar så att den tycks snart hamna ur bild, så hindras den.
Hej!
Jag är inte helt med på vad du menar. Men scrollmetoder jag använt (1 gång) så gjorde jag något liknande det här:
<div ID="imageDiv" name="imageDiv" style="position: absolute; top: 0px;"><img src="bilder/testbild.jpg"></div>
<script language="javascript">
function moveDiv()
{
window.status = document.body.scrollLeft;
document.getElementById("imageDiv").style.top = document.body.scrollTop + "px";
}
</script>
<body onscroll="moveDiv();">
Det är ingen vidare snygg kod, och resultatet är tvivelaktigt då det inte följer med så vackert (väldigt hackigt). Jag vet inte exakt varför det hackar så kraftigt, men jag misstänker att det kan ha att göra med anropet "onscroll"
Sidan du länkade till fick jag inte önskvärt resultat på, den såg fint ut när jag resize:ade, men märkte ingenting med scrollningen.
Ouch, om det rör sig om en onScroll, då hade jag redan från början antagit att det hackar utan att du hade sagt det.
Metoden som gör att den lyssnar till musens position i realtid - den möjligheten finns alltså inte vid scroll?
När det gäller länken du fick så saknar den funktionen jag är ute efter. Jag försökte bara visualisera ungefär hur div:en ska positioneras, men att den _dessutom_ har den här scrollfunktionen.
Jag tror att du har begripit vad jag är ute efter i och med din kod ovan.
Nu kvarstår om deet går att slippa att arbeta med onScroll och på något vis jobba i realtid.
Om det inte går får jag helt enkelt gå till Plan B
Det underliga är att när jag kör "window.status = document.body.scrollTop så tycker jag värdena verkar uppdateras rätt smidigt. Men när jag flyttar lagret i samma funktion så skuttar den en del.
Prova själv och se hur det blir, därefter kan du prova olika metoder/lager och se om det blir någon skillnad.