Friends, I am developing a layout and I want that when the user scrolls the page a div (represented in black in the picture) walk along with the page, gaining more distance from the top. How to do it?
It’s not too clear from the picture what you are requiring with the black section. Are you wanting it to be fixed on the screen as the page scrolls, or something else?
The site will only have one page and a menu with anchors (#). I want that when the page scroll, the div with the menu down, becoming more distant (top, margin-top…). Understand?
How far distant? When the page is really long, will it become so distant as to fall off the bottom of the page? Should the amount that is becomes distant be in relation to the overall length, so that the furthest distance is near the bottom of the screen? What if more content is added to the page, such as when an accordion section is revealed. Should the distance then adjust to the new page length? Will the menu section move smoothly from top to bottom as the page is scrolled, or will each section of the page have the div as a different set location on the page.
Please provide further details.
The div (black) must be displayed on the screen forever, until the end of the last section tag, as in the picture.
The first section (about), for example, the div will be at a distance from the top 100px. In the second (services), 130px.
All I need is this, for the rest I’ve done, see:
jQuery(document).ready(function() {
var nav_container = jQuery("#menu");
var nav = jQuery("#nav");
var top_spacing = 0;
var waypoint_offset = 0;
nav_container.waypoint({
handler: function(direction) {
if (direction == 'down') {
nav_container.css({ 'height':nav.outerHeight() });
nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({"top":top_spacing});
}else {
nav_container.css({ 'height':'auto' });
nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});
}
},
offset: function() {
return -nav.outerHeight()-waypoint_offset;
}
});
headerWrapper = parseInt(jQuery('#nav').height());
offsetTolerance = 40;
jQuery(window).scroll(function() {
scrollPosition = parseInt(jQuery(this).scrollTop());
jQuery('nav a').each(function() {
thisHref = jQuery(this).attr('href');
thisTruePosition = parseInt(jQuery(thisHref).offset().top);
thisPosition = thisTruePosition - headerWrapper - offsetTolerance;
if(scrollPosition >= thisPosition) {
jQuery('.selected').removeClass('selected');
jQuery('nav a[href='+ thisHref +']').addClass('selected');
}
if(scrollPosition <= 0) {
jQuery('.selected').removeClass('selected');
}
});
bottomPage = parseInt(jQuery(document).height()) - parseInt(jQuery(window).height());
if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {
jQuery('.selected').removeClass('selected');
jQuery('nav a:last').addClass('selected');
}
});
jQuery("#nav a").click(function() {
var divV = jQuery(this).attr("href");
jQuery('html,body').animate({
scrollTop: jQuery(divV).offset().top -176
}, 1000);
return false;
});
});
So are you wanting the second div to remain at the same fixed height from the top of the computer screen?
Yes, when the user scrolls the page, both the menu as the black div will be fixed. The difference is that the split had been with the margin-top increased.
Okay, good. The most effective way that I’ve seen to do that is by using CSS to set the position of the div to be fixed.
See for example: http://davidwalsh.name/css-fixed-position
They use 2% in that example, but you can use any pixel values that you like too, such as 130px
Yes, this I do know, what I want is that the margin-top INCREASE while the page is being scrolled.
Good - that is the sort of information that I’m trying to drag out of you.
What sort of increase are you wanting? One that increases in steps according to the section of the page, or one that increases gradually as the page is scrolled.
If the latter, then what is the final position that you are wanting for it?
The second option. We assume that the page has five sections. In section 1, the margin-top would be 100px; in 2, 130px, at 3 160px.
Do you understand now?
Thank you for explaining that. One way do do that would be to regularly check the scroll position of the sections. The one that has the smallest positive value is the current section showing on the screen, and you would use the offset() method to set the menu to the appropriate position.
Can you show me how to do? I’m trying this for almost two days and still can not.
Something like the following seems to be close to what you’re after.
http://jsfiddle.net/pmw57/2m6Ry/1/
It worked perfectly. You can do the margin-top of div increase smoothly, slowly?
Reduce a bit your code:
$(document).scroll(function() {
var cutoff = $(window).scrollTop();
var black = jQuery('#black');
$('section').each(function(i){
if($(this).offset().top + $(this).height() > cutoff){
black.css('top', 100 + 100 * i);
return false;
}
});
});