This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can you get the user’s scroll position every time they scroll with JavaScript/jQuery?
I am trying to write something in JavaScript/Jquery on the use of scroll events.
Here is where I started but I can't seem to figure out how to get scroll value.
I am looking for is the class/method to find the current scroll
position on the page.
Any help is greatly appreciated.
$(document).ready(function () {
$(window.parent.document).scroll(function () {
var scroll_info = X;//X == the method/class of getting scroll value
if (scroll_info > 40) {
//show
$('#ArrowImage').show(1000);
} else {
//hide
$('#ArrowImage').hide(1000);
}
});
});
You could likely use both JQuery's .prop and .scrollTop methods to retrieve the position of the vertical scroll bar, for the element you're trying to scroll. Here's an example that combines a little of each of those to scroll a textbox to its bottom:
$('#chatTextContainer').scrollTop(
$('#chatTextContainer').prop("scrollHeight") );
To find the currently scrolled top, you would use something like this:
$(element).prop("scrollTop")
What you seem to be looking for is:
theTop = $("html").scrollTop();
Related
This question already has answers here:
jquery : detecting scroll position
(3 answers)
Closed 6 years ago.
I've seen a cool little effect on some websites where the top header/navigation menu is fixed, and shrunk as the user scrolls past a certain point on a webpage.
How can I detect when a user scrolls to a certain position of a page?
Something like:
$(window).scroll(function () {
var topShow = 150;
if ($(this).scrollTop() > topShow) {
// your logic here
}
});
This question already has answers here:
Smooth scroll to div id jQuery
(16 answers)
Closed 7 years ago.
I'm creating a site and it looks similar to this site. As you can see in the example that there is an animated arrow that if you press moves you down. This way is a bit sudden so an animated moving down would be cool. I'm more focused on the page moving down in a nice way rather than the animated arrow. Do you know how to get this done in html and css? If this can't be done with html or css than jQuery?
Example:
http://www.fhoke.com
<button id="test"> Test<button>
for scrolling to top:
$( "#test" ).click(function() {
var x = $(window).scrollTop();
$(window).scrollTop(x+150);
});
for down:
$( "#test" ).click(function() {
scrolled=scrolled-300;
$("body").animate({
scrollTop: scrolled
});
});
This question already has answers here:
jQuery height() returns 0 on a visible div - why?
(5 answers)
Closed 9 years ago.
I am using
$(document).ready(function(){
var height = $('#home_sidebar').height();
});
to get the height of my home_sidebar div. The code is only executed when the page is fully loaded. However it returns different numbers from time to time. For example, sometimes it says 1699, sometimes it returns 1398.
There are "img" and "a" tags inside this div, what could possibly go wrong?
By the way, I am implementing a docking div on http://www.city365.ca. If you see the colored icons stick to the top of the page, it is working.
If you see the colored icons docking at the bottom of the page, it is not working.
use $(window).load() to make sure your images are loaded
$(window).load(function(){
var height = $('#home_sidebar').height();
});
Try this:
$(window).on('load', function(){
var height = $('#home_sidebar').height();
});
$(window).on('load'... will wait for the images to load before firing.
I would also state another (obvious) possibility which is that you resized the window between loads. Just to be complete :)
This question already exists:
jQuery Waypoints Plugin
Closed 9 years ago.
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down') nav_container.css({ 'height':nav.outerHeight() });
else nav_container.css({ 'height':'auto' });
},
offset: 15
});
});
How are you? - I'm using imakewebthings.com/jquery-waypoints to move nav element down the page. How ever I will like to un-stick the nav element at a specific segment of my page and then when scrolling back up for it to stick it back and carry it to its original spot- maybe 30pixcel after scrolling down.
Any help will be appreciated.
If I understand you're wanting an element to stick when it passes a certain threshold, and return to fixed when it goes above that?
if so - check out http://drewdahlman.github.io/Pinned/ this will do exactly what you're wanting. it's an easy to use plugin.
$("#element").pinned({
bounds: 30, // when to become sticky
scrolling: 0, // position during scroll
});
it will return to its original position after it's above 30 and stick when it hits 30px. Make sure you set it's default position to absolute.
Good luck!
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Disable button if margin-left = -3200
I have a page that when it loads, there is a div that is margin-left:0px; on the click of a button, this element moves left in 600 pixel increments. Somehow I want to try and listen to when the element is -3200 pixels from the left only I cant seem to figure it out.
Can anybody see where im going wrong?
$(".hero-carousel").on("click", function(event){
if($(this).css("margin-left") == -4480) {
alert('test');
} else {};
});
Try this...
$(".hero-carousel").on("click", function(event){
var left = parseInt($(this).css("margin-left"), 10);
if (left <= -3200) {
// do something here
}
};
});
In your case .css("margin-left") probably returns srting like -4480px
and you're compareing it to an integer. So get rid of the px in the end and parse it to a number
Actually as #lan said bellow the parseInt() would strip out the 'px' for you and turn it into integer