Div fixed maken nadat die de top raakt
Ik wil graag dat ik een menu op een willekeurige plek kan zetten (niet helemaal bovenaan) en dat als ik scroll en dit element de top van de pagina raak, automatisch fixed wordt en in beeld blijft. Dus in het begin is de div niet fixed en blijft niet staan, maar als die de top van de pagina raakt, moet ie blijven staan. Op Stackoverflow had ik een voorbeeldje gevonden die niet werkt :(
Dit is de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper {
width: 960px;
height: 2000px;
position: absolute;
}
#voorbeeld {
width: 100%;
height: 60px;
background: #006F93;
margin-top: 100px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
if($(window).scrollTop() > 0){
//we're scrolling our position is greater than 0 from the top of the page.
$("#element").css({'position' : 'fixed'});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="voorbeeld"></div>
</div>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper {
width: 960px;
height: 2000px;
position: absolute;
}
#voorbeeld {
width: 100%;
height: 60px;
background: #006F93;
margin-top: 100px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
if($(window).scrollTop() > 0){
//we're scrolling our position is greater than 0 from the top of the page.
$("#element").css({'position' : 'fixed'});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="voorbeeld"></div>
</div>
</body>
</html>
Dit werkt dus niet. Hoe krijg ik dit aan de praat?
Alvast bedankt voor jullie hulp!
Mvg,
Piet
Om te beginnen, ik hoop dat je ten minste geprobeerd hebt om id="voorbeeld" te hernoemen naar "element" (of omgekeerd); anders zie ik niet in waarom je zou verwachten dat jQuery weet dat het over id="voorbeeld" gaat.
Maar ja ...
Een paar aanpassingen aan deze code; ik denk dat je ongeveer dit wil:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper {
width: 960px;
height: 2000px;
position: absolute;
}
#element {
width: 960px; /* Die 100% werkt niet als de position op fixed staat */
height: 60px;
background: #006F93;
margin-top: 100px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// zie http://www.phphulp.nl/php/forum/topic/div-fixed-maken-nadat-die-de-top-raakt/87968/
$(document).ready(function() { // wordt uitgevoerd op het moment dat de pagina is geladen
// we gaan eerst wat default waarden in een var steken
var menu_margin_top = $("#element").css('marginTop');
menu_margin_top = Number(
menu_margin_top.substr(0, menu_margin_top.length -2) // dit laatste maakt van '100px' -> '100', we halen de twee laatste karakters weg.
);
$(window).scroll(function(e) { // wordt uitgevoerd telkens de gebruiker scrollt.
if($(window).scrollTop() > menu_margin_top) { // we triggeren dit effect vanaf een scroll van 100px (= de margin-top). Dan staat dat element helemaal bovenaan.
//we're scrolling our position is greater than 0 from the top of the page.
$("#element").css({
position : 'fixed',
margin: 0
});
}
else { // hier zitten we op een scroll die bovenaan de pagina is. We zetten alles terug op de standaard-waarden
$("#element").removeAttr('style'); // = alles ongedaan maken dat hier boven is gedaan
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="element"></div>
</div>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper {
width: 960px;
height: 2000px;
position: absolute;
}
#element {
width: 960px; /* Die 100% werkt niet als de position op fixed staat */
height: 60px;
background: #006F93;
margin-top: 100px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// zie http://www.phphulp.nl/php/forum/topic/div-fixed-maken-nadat-die-de-top-raakt/87968/
$(document).ready(function() { // wordt uitgevoerd op het moment dat de pagina is geladen
// we gaan eerst wat default waarden in een var steken
var menu_margin_top = $("#element").css('marginTop');
menu_margin_top = Number(
menu_margin_top.substr(0, menu_margin_top.length -2) // dit laatste maakt van '100px' -> '100', we halen de twee laatste karakters weg.
);
$(window).scroll(function(e) { // wordt uitgevoerd telkens de gebruiker scrollt.
if($(window).scrollTop() > menu_margin_top) { // we triggeren dit effect vanaf een scroll van 100px (= de margin-top). Dan staat dat element helemaal bovenaan.
//we're scrolling our position is greater than 0 from the top of the page.
$("#element").css({
position : 'fixed',
margin: 0
});
}
else { // hier zitten we op een scroll die bovenaan de pagina is. We zetten alles terug op de standaard-waarden
$("#element").removeAttr('style'); // = alles ongedaan maken dat hier boven is gedaan
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="element"></div>
</div>
</body>
</html>
----
Ondertussen een beetje geoptimaliseerd. Ik laat het origineel staan; qua logica is het waarschijnlijk wat duidelijker. Maar dit hier onder is beter.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
// zie http://www.phphulp.nl/php/forum/topic/div-fixed-maken-nadat-die-de-top-raakt/87968/
$(document).ready(function() { // wordt uitgevoerd op het moment dat de pagina is geladen
// we gaan eerst wat default waarden in een var steken en wat cachen
var element = $("#element");
var menu_margin_top = element.css('marginTop');
var timer;
menu_margin_top = Number(
menu_margin_top.substr(0, menu_margin_top.length -2) // dit laatste maakt van '100px' -> '100', we halen de twee laatste karakters weg.
);
$(window).scroll(function(e) { // wordt uitgevoerd telkens de gebruiker scrollt.
clearTimeout(timer);
timer = setTimeout(function() {
if($(window).scrollTop() > menu_margin_top) { // we triggeren dit effect vanaf een scroll van 100px (= de margin-top). Dan staat dat element helemaal bovenaan.
if ( element.css('position') != 'fixed' ) { //
//we're scrolling our position is greater than 0 from the top of the page.
element.css({
position : 'fixed',
margin: 0
})
}
}
else { // hier zitten we op een scroll die bovenaan de pagina is. We zetten alles terug op de standaard-waarden
if ( element.css('position') == 'fixed' ) {
element.removeAttr('style'); // = alles ongedaan maken dat hier boven is gedaan
}
}
}, 200);
});
});
</script>
// zie http://www.phphulp.nl/php/forum/topic/div-fixed-maken-nadat-die-de-top-raakt/87968/
$(document).ready(function() { // wordt uitgevoerd op het moment dat de pagina is geladen
// we gaan eerst wat default waarden in een var steken en wat cachen
var element = $("#element");
var menu_margin_top = element.css('marginTop');
var timer;
menu_margin_top = Number(
menu_margin_top.substr(0, menu_margin_top.length -2) // dit laatste maakt van '100px' -> '100', we halen de twee laatste karakters weg.
);
$(window).scroll(function(e) { // wordt uitgevoerd telkens de gebruiker scrollt.
clearTimeout(timer);
timer = setTimeout(function() {
if($(window).scrollTop() > menu_margin_top) { // we triggeren dit effect vanaf een scroll van 100px (= de margin-top). Dan staat dat element helemaal bovenaan.
if ( element.css('position') != 'fixed' ) { //
//we're scrolling our position is greater than 0 from the top of the page.
element.css({
position : 'fixed',
margin: 0
})
}
}
else { // hier zitten we op een scroll die bovenaan de pagina is. We zetten alles terug op de standaard-waarden
if ( element.css('position') == 'fixed' ) {
element.removeAttr('style'); // = alles ongedaan maken dat hier boven is gedaan
}
}
}, 200);
});
});
</script>
Gewijzigd op 03/12/2012 11:49:42 door Kris Peeters