ok I have seen people using position:fixed to have a div follow the scroll.
I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :
create a smooth scroll for the box
scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)
an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47
but I cant figure out what they used and even if they used a library.
As a slight alternative to Adam Hutchinson's
http://jsfiddle.net/HelloJoe/JjuQu/
It's pretty self explanatory but just say if you need anything explained.
This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively
Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.
$(document).scroll(function(){
$('#divtomove').css('top', $(document).scrollTop());
})
Also, this is the code in the example page, just to get an idea
var $scrollingDiv = $("#customize");
$(window).scroll(function () {
if ($(window).scrollTop() > 490) {
if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() - 500) + "px"
}, "slow");
}
} else {
$scrollingDiv.stop().animate({
"marginTop": "0px"
}, "slow");
}
});
Simpler solution:
$('#divtomove').scrollFollow();
Related
On my page, I have a div element containing copyright information.
I would like to
detect if the user has scrolled all the way to the bottom of the page.
if so, have the div slide down.
It would also be nice if there was a way that JQuery could tell if I am near the box without having to scroll over it to display the copy right as well.
Thanks, DoubleDogg6
It's simple to detect this.
take a look at this jfiddle:
Detect scrolling to the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
2.
For sliding down a div read the documentation for .slideDown()
jQuery .slideDown()
If you want jQuery, then this should suffice
$(window).scroll(function(){
if ($(window).scrollTop()+$(window).height() == $(document).height()){
// and now, slideDown
$("#your-div-id").animate({
height: /* whatever your final height should be */
}, 200);
} else if ($(window).scrollTop()+$(window).height() < $(document).height() + 50) {
$("#your-div-id").animate({
height: /* whatever your original height was */
}, 200);
}
});
Of course, you combine the animate function with others to maybe fade in the text or something, and change the speed at which the animation happens, currently 200ms.
You also want your div's overflow-y set to hidden,
#your-div-id {
overflow-y: hidden;
}
Check out this JSFiddle demo.
I tried to implement the scrollTo funcion but the problem is that when i scroll i want the element that i scrolled to at the topof the screen not in the middle or somewhere else.
JsFiddle
here is the js funcion
$(document).ready(function () {
$(".scroll").click(function (event) {
$('html,body').animate({
scrollTop: $("#footer").offset().top
}, 500);
});
});
Your problem here is that there is not enough space at the bottom of the screen to scoll so that the targets ends at the top. The scrollbar is fully at the bottom.
Add a lot of whitespace at the end of the page, this will give more room for scrolling. When you do this, your code works just fine.
It is because your page isn't tall enough. To make a javascript function that automatically makes the page high enough (no matter what is in it) do:
$("body").height("100%");
$("html").height(($("body").height()) + 500);
see: http://jsfiddle.net/ZNV7G/1/
If you want to be extra sure you can replace the + 500 with * 2, but that will be a bit excessive in smaller documents.
I have built the prototype that I'll use for my site header, it is basically a simple navigation that on scroll re-appears on screen in a fixed position (sticky nav). I firstly acheived this by having two tags in the markup but ideally I'd liek to acheive this using only one.
Here's my codepen
If you slowly scroll down you should see what I'm trying to achieve here. Heres my javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 60){
$('.main-header').addClass("sticky-header");
}
else{
$('.main-header').removeClass("sticky-header");
}
if ($(this).scrollTop() > 160){
$('.main-header').addClass("sticky");
}
else{
$('.main-header').removeClass("sticky");
}
});
There is probably a better way of achieving this using a slightly different approach? I don't like the fact I'm testing for two instances of scroll top, only did this because firstly I need a way to apply the positioning of the header, apply the margin value which does the snazzy transition as if it's moving downwards from the top of the page.
Replace Your javascript with the below one: you will get nice scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 0){
$('.main-header').addClass("sticky-header");
}
else{
$('.main-header').removeClass("sticky-header");
}
if ($(this).scrollTop() > 160){
$('.main-header').addClass("sticky");
}
else{
$('.main-header').removeClass("sticky");
}
});
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});
I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
I tried to see how they did their code but i couldnt figure it out.
sounds like mootools tho?
If someone can help that would be awesome. thanks!
You can create such a menu using jQuery and CSS, swapping classes as needed when:
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
EDIT: Here's your fiddle.
http://jsfiddle.net/lazerblade01/fNn7K/26/
For anyone searching through stackoverflow here is my try:
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
the twitter one can react to a particular element of interest coming into view.
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
http://davidwalsh.name/mootools-scrollspy
You could try Twitter's Bootstrap. Check out their second toolbar.