Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Floating menu i problem z suwakiem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mega_88
Witam,

mam problem z pływającym menu. Postaram się wytłumaczyć to jakoś logicznie i w skrócie:

Strona składa się z div'ów "top" i "middle". W divie "top" mamy jakieś tam elementy i przyjmijmy, że jego wysokość to 500px, a w divie "middle" o wysokości "auto" mamy jakieś tam elementy a dodatkowe nasze "floating menu". Zrobione są kotwice do diva "middle" więc całe plywające menu od razu pokazuje się w "middle" omijając całego diva "top". Problem pojawia się kiedy chcemy wrócic uzywając suwaka do DIV'a "top" ponieważ całe plywające menu nakłada nam się na "topa" kiedy przesywamy suwak do góry. Jak zrobić by pływające menu znikało po przekroczeniu górnej granicy "middle"

Poniżej wklejam kody HTML, CSS i JS

HTML:
Cytat
<div id="floatMenu">
<ul>
<a href=""><h3>Audyty</h3></a>
<a href=""><h3>Certyfikaty</h3></a>
<a href=""><h3>Kamera</h3></a>
<a href=""><h3>Oferta</h3></a>
<a href=""><h3>Zapytanie</h3></a>
</ul>
</div>


CSS
Cytat
#floatMenu {
position:absolute;
padding-top:0px;
bottom:30px;
top:0px;
margin-left:0px;
min-height:300px;
width:200px;
}


JS
Cytat
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
kamil4u
Kod
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});

->
Kod
var offset = menuYloc+$(document).scrollTop();
if( offset < 500 ) offset = 500;
$(name).animate({top:offset+"px"},{duration:500,queue:false});


Jeżeli nie zadziała wrzuć demo online.
Mega_88
Wszystko ładnie działa, dziękuje headsetsmiley.png
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.