-
29-02-2012, 17:05 #1
Script gezocht voor pop-up na het scrollen op de pagina
Hallo iedereen,
Ik ben op zoek naar een script waar een niet storende pop-up verschijnt in de bottomcorner van mijn pagina na het scrollen. Een voorbeeldje zie je op het nieuwsblad:
Lesley-Ann Poppe doet mee aan Expeditie Robinson - Het Nieuwsblad
Random article
Weet iemand waar ik gelijkaardige code zou vinden? Ik heb al wat gegoogled maar zonder succes.no votes
-
-
29-02-2012, 17:34 #2Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
Ge kunt da zelf designen hé.
bv
HTML Code:<div class="box"> <p>blah</p> </div>
Code:.box { background-color: white; border: 1px solid black; display: none; position: absolute; bottom: 0; right: 0; z-index: 999; }Zoiets zou moeten werken, kan syntax foutjes bevatten.Code:$(window).scroll(function() { if($(this).scrollTop > 10) //hier kan je wat spelen met het getal 10, meer bepaald op welke hoogte je uw box wilt laten zien { $('.box').fadeIn('slow'); } else { $('.box').fadeOut('slow'); } });-no votes
-
29-02-2012, 19:38 #3Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Is wel een position: fixed aangezien het niet mag meescrollen.
no votes
-
29-02-2012, 19:43 #4Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Heb verder gebouwd op Mam (bij mij werkte zijn code niet volledig, dus wat aangepast). Hier een test case (dieje div 'test' dient om te laten zien dat het wel degelijk toont bij '100px'). Code:
HTML
JSHTML Code:<div id="wrapper"> <div id="test"></div> <div class="box"> <p>Gutentag!</p> </div> </div>
CSSCode:$(document).ready(function () { var box = $('.box'); box.hide(); $(window).scroll(function () { if ($(document).scrollTop() > 100) { box.fadeIn('slow'); } else { box.fadeOut('slow'); } }); });
jQuery is leuk - als het werkt!Code:#wrapper { height: 2000px; width: 100%; margin: 0; padding: 0; } #test { width: 100%; height: 5px; background-color: grey; top: 100px; position: relative; } .box { background-color: white; border: 1px solid black; z-index: 999; width: 100px; height: 100px; position: fixed; padding: 0.5em; text-align: center; bottom: 20px; right: 20px; display: block; }Last edited by -BVR-; 29-02-2012 at 19:59. Reason: Foutjes eruit gehaald
no votes
-
29-02-2012, 19:49 #5Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
no votes
-
29-02-2012, 19:59 #6Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
no votes
-
29-02-2012, 20:39 #7
THX Mam en BramVroy! Ik heb het meteen even getest maar de fade wil bij mij niet lukken. Ik heb in JS al ingesteld op 2000 en ook in m'n css heb ik de margin top op 2000px gezet.
Het oproepen van de javascript heb ik al eens in m'n head gedaan maar ook net boven mijn code. Enig idee wat ik fout doe?
no votes
-
29-02-2012, 20:49 #8Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
Hebt ge niks online staan ofzo?
Die margin 2000px heeft bramvroy ingesteld zodat je een scrollbar krijgt in het voorbeeld van jsfiddle, normaal hebt u dit niet nodig!-no votes
-
29-02-2012, 20:57 #9no votes
-
29-02-2012, 21:10 #10Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Ben je jQuery niet vergeten te includen? Je <head> moet er dus zo uit zien:
(Je kan ook je scripts in je body zetten, voor de sluitende </body>-tag. Dit zou performanter zijn.)Code:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #wrapper { height: 2000px; width: 100%; margin: 0; padding: 0; } #test { width: 100%; height: 5px; background-color: grey; top: 100px; position: relative; } .box { background-color: white; border: 1px solid black; z-index: 999; width: 100px; height: 100px; position: fixed; padding: 0.5em; text-align: center; bottom: 20px; right: 20px; display: block; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- Niet vergeten, zonder dit werkt onderstaande script niet! !--> <script type="text/javascript"> $(document).ready(function () { var box = $('.box'); box.hide(); $(window).scroll(function () { if ($(document).scrollTop() > 100) { box.fadeIn('slow'); } else { box.fadeOut('slow'); } }); }); </script> </head>
Zoals Mam zegt is die div 'test' niet nodig, dat was maar om aan te tonen dat het daadwerkelijk werkt!
EDIT: ik had eerst inderdaad met margin gewerkt, maar dat gaf problemen op hogere resoluties (wrapper werd naar beneden getrokken) dus dan maar met position relative!
EDIT2: hier zie je m'n testcase (in't groot) klik. Neem maar eens een kijkje naar de broncode als het nog niet lukt.no votes
-
01-03-2012, 00:26 #11
@ $de_vieux: Ik bedoel dat ik het 1x geprobeerd heb in m'n head en 1x net voor mijn content.

BramVroy, ik ben inderdaad die jquery vergeten toevoegen:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Bedankt het werkt nu prima! Ik ben een echte noob op dit gebied
Nu eens zien of ik hier dan enkele social media buttons in krijg via jouw tutorial. De demopage werkt wel niet, wist je dit?
Is er ook een mogelijkheid om dit te integreren met de layout van mijn site? Nu staat de box afhankelijk van uw scherm steeds in de onderste corner rechts. Het lijkt me wel leuk dit mee te laten scrollen in bv. Mijn rechternavigatie.Last edited by tonymontana; 01-03-2012 at 00:35.
no votes
-
01-03-2012, 06:41 #12Member
- Registered
- 16/04/08
- Location
- Hong Kong
- Posts
- 1,989
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/9
Dit werkt dan gewoon hetzelfde, vanaf je een bepaald punt bereikt verander je de positioning van je menu naar fixed. (Hou er wel rekening mee dat je layout juist in elkaar zit, anders zou hij wel eens kunnen breken).
no votes
-
01-03-2012, 08:44 #13Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Tonymantana: kan je anders een PM sturen met wat je juist wilt bereiken, evt. met een test case bij? Of een nieuw topic? Kwestie van het overzichtelijk te houden

EDIT: bedankt om te melden, ik bekijk het straks!Last edited by -BVR-; 01-03-2012 at 08:49.
no votes

