i want to do something when the windows scrolls to a certain position
my JS FIDDLE : https://jsfiddle.net/to1uuvnb/1/
html
<div id="target">
</div>
css
#target
{
min-height:1000px;
max-width:300px;
background-color:#eee;
}
js
$('#target').scroll(function(){
if($(this).scrollTop() > 10)
{
alert('');
}
});
#target isn't scrollable. Put your #target into a scrollable container (just another div) then detect scrolling on that. Here is a fiddle... https://jsfiddle.net/to1uuvnb/2/
Here is the fiddles code...
HTML
<div id="container">
<div id="target">
</div>
</div>
CSS
#container
{
height:100px;
max-width:300px;
background-color:#eee;
overflow: auto;
border:2px solid red;
padding:10px;
}
#target
{
min-height:1000px;
max-width:300px;
background-color:#eee;
border:2px solid blue;
}
JavaScript
$('#container').scroll(function (event) {
var scroll = $('#container').scrollTop();
if (scroll > 300) /* after a certain point, do something... */
alert(scroll);
});
#target is not scrollable (don't have a scrollbar), you should attach event to window:
$(window).scroll(function(){
if($(this).scrollTop() > 10)
{
alert('');
}
});
Lets say you have a textarea and you want to know when the user have scrolled passed i specific area.
Here are a simple textbox with some dummy text.
<textarea class="scrollText">Bacon ipsum dolor amet jowl ribeye chuck pancetta. Venison pastrami bacon, pork belly frankfurter meatball pancetta. Frankfurter alcatra ground round leberkas tri-tip jerky. Filet mignon biltong sausage cow.
Chicken alcatra doner ground round, kielbasa t-bone chuck flank pork chop salami ribeye pork belly porchetta bresaola beef. Shank meatball sausage cupim boudin venison doner pancetta short loin frankfurter ribeye bresaola spare ribs. T-bone filet mignon hamburger salami jerky beef bacon pastrami kevin short loin leberkas sausage chicken shank corned beef. Frankfurter tenderloin flank sirloin.
Venison beef ribs ham hock, pastrami beef tail brisket short loin spare ribs. Jerky ground round flank chuck shoulder chicken strip steak tongue ham hock andouille landjaeger. Drumstick doner corned beef salami pig, bacon boudin venison capicola shank beef. Tongue meatball alcatra beef picanha shankle porchetta doner brisket prosciutto pork chop. Picanha strip steak ball tip, short ribs chuck meatloaf tri-tip turducken. Pork chop jowl pig rump bresaola turducken.
Short ribs pork loin jowl ham hock cupim turkey, strip steak shoulder shank corned beef leberkas swine meatball sirloin bresaola. Beef ribs ham hock prosciutto salami, tri-tip shank ball tip drumstick jerky biltong ribeye venison chicken alcatra. Strip steak picanha landjaeger ham hock ribeye shankle pork belly drumstick porchetta. Ribeye venison picanha flank, ham meatloaf pastrami. Bresaola tongue andouille jowl. Fatback drumstick leberkas, bacon shank biltong chicken. Capicola filet mignon sirloin, andouille pastrami shankle jowl meatball chicken short loin cupim tri-tip pork fatback salami.
Turkey beef ribs chicken bresaola shoulder chuck tongue boudin brisket. Short loin bresaola tail rump cupim boudin. Cow prosciutto fatback kevin pork belly, tail spare ribs beef ribs ground round. Turducken ribeye doner, capicola ball tip sausage shank pork belly tenderloin bresaola meatloaf jerky. Bresaola alcatra frankfurter pork loin corned beef biltong, pig shoulder chuck picanha landjaeger. Shankle jowl meatball kielbasa pork chop ham hock capicola drumstick jerky chuck chicken beef ribs. Capicola venison strip steak pig, sausage biltong andouille drumstick salami kielbasa hamburger jerky tenderloin meatloaf.</textarea>
Now we define som CSS for it
.scrollText {
height:200px;
width:300px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 82%;
overflow:scroll;
}
Ok so we know we want to reference the textarea with the class scrollText.
In Javascript(jQuery):
// Make sure the dom is ready
$(function () {
// Make a variable for where you want to take action based on scrolling
var scrolledPast500 = false;
// with jQuery use the .on('scroll') event and pass a anonymous function.
$('.scrollText').on('scroll', function() {
// define a variable that holds the current vertical position of the scroll bar for the element
var st = $(this).scrollTop();
// watch as you scroll, the variable is adjusted to the current vertical position on scroll.
console.log(st);
});
});
With the variable we can now to certain stuff when the st variable == ? < ? > ?
Here is a working fiddle: http://jsfiddle.net/dgwq7w0d/
