this content was originally posted here.

detect window scroll position jquery

This one adds or removes a class if the document is scrolled 50 px near the top of the window.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

We can monitor the scroll position with the following code, this will console log each scroll position counting from the top into console log.

$(window).scroll(function() {
  console.log($(document).scrollTop());
});

lets say that we wanted the background of the page become pink (as you do) when we scroll down 100 px

something like this should do it

script

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('h1').addClass('pink');
  } else {
    $('h1').removeClass('pink');
  }
});

css

.pink { color:#f3b4f0; }

scroll down to see the h1 and h3 color change, then back to the top to go back to original.

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('h1').addClass('pink');
  } else {
    $('h1').removeClass('pink');
  }
});

you can also add the scroll top position into a div, if you cant be bothered looking at the console window.

Scroll Position: 0

$(window).scroll(function() {
  $('#scrollpos').html($(document).scrollTop());
});

lets stick that to the bottom of the window, just so we can see where it at.

.scroll-pos { 
	font-size:16px;
	background:rgba(0,0,0,0.9);
	color:#FFF;
	text-shadow:0px 1px 2px #000;
	position:fixed;
	bottom:0;
	right:0;
	padding:5px 10px;
}

With this code you can add it to a navigation to make it stick on scroll at a certain position. I might try that next.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Mmm.. padding

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:jgMy0
$p4:detect-window-scroll-position-jquery
$p5:
$p6:
$p:/view/code/jgMy0/detect-window-scroll-position-jquery/
Using Template: view-code.html