I've been trying to get a DIV to move up when using the scroll on browser to move down, but I can't find a solution which works.
More specifically, for example if I fill a DIV with images, I want these images to scroll upwards when I scroll the browser window scrollbar downwards. So as you move longer down the page, the DIV moves upwards and shows more images.
Could you give me some suggestions how to receive such an effect?
Try something like this:
$(window).scroll(function(){
$("#scrollingDiv").stop().animate({ "marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");
});
I don't entirely follow what you are trying to do with the <div> content, but there is an easy way to detect page scrolling with jQuery:
$.scroll(function() {
alert('Scroll position: ' + $('html').scrollTop());
});
From there, you can position whatever you want, however you want, using this value $('html').scrollTop().
Maybe I'm misunderstanding but, are you trying to keep your DIV in a fixed position regardless of how far the user scrolls down the page?
If so there's a style for that:
position:fixed
Related
I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.
divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/
You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/
Sorry, I'm new to javascript, and I'm stumped with this problem.
I have a div in fixed position at the top of my page.
In it are links that when you click, the page scrolls to an anchor. (I used jquery for this.)
I also used javascript to make the "back to top" button appear whenever someone click any of these links, and disappear when they click the "back to top" button itself.
...But it occurs to me that sometimes people will just use the scroll bar instead of the buttons.
Is there a way to make the "back to top" button appear when users scroll down using the scroll bar, and disappear when they scroll back to the top?
In other words, is there an attribute that I can use to assess what anchor is currently at the top of the page? (If so, I can probably figure out the solution from there...)
...Or maybe there is some way to know when users have scrolled back to the top so I can use javascript to get rid of the "back to top" button?
Any help appreciated! Thanks!!
You can get the scroll position with
var scrollTop = $(window).scrollTop();
http://docs.jquery.com/CSS/scrollTop
There are some more hints here: How do I determine height and scrolling position of window in jQuery?
You can use the scrollTop() function in jQuery to determine scrolling distance.
F.ex:
$(window).scroll(function() {
$('#backtotop').toggle( $(this).scrollTop() );
});
This will hide the element with backtotop as ID when the scrolled distance is 0.
If you like a non-jQuery solution, I’m pretty sure you can use the window.scrollY property:
window.onscroll = function() {
if (!window.scrollY) {
// hide it
} else {
// show it
}
};
I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/
I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.
I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.
The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.
I've used the following code with some success:
jQuery().ready(function($) {
var $scrollingDiv = $("#sidebar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
But it jumps too far when scrolling down.
(original position)
(scrolled a single mousewheel click)
When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.
Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.
Is there a fix that can be applied to this code, or a better way of approaching this?
---------------------------------------------------------------------------------
EDIT: position:fixed Problem
When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:
Here is Firebug's read-out of the CSS styles attached to this element:
You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.
Consider this simple markup:
<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>
And this would be all the javascript you need:
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:
#sidebar.fixed > div{position:fixed;}
I put up a really simple demo here: http://jsfiddle.net/QZyH3/
You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.
why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top