SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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


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
  •