SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with .scroll()

    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?

    http://i.imgur.com/BZKrUux.jpg

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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;
       });
    
    });

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    The first section (about), for example, the div will be at a distance from the top 100px. In the second (services), 130px.
    So are you wanting the second div to remain at the same fixed height from the top of the computer screen?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    So are you wanting the second div to remain at the same fixed height from the top of the computer screen?
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, this I do know, what I want is that the margin-top INCREASE while the page is being scrolled.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show me how to do? I'm trying this for almost two days and still can not.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    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/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked perfectly. You can do the margin-top of div increase smoothly, slowly?

    Reduce a bit your code:

    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;
               }
          });
       });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •