2012-10-09 56 views
3

我有以下代碼獲取用戶從頂部和底部滾動的數量,然後使用這些值應該隱藏或顯示陰影。使用jQuery獲取scrollbottom

$(document).ready(function() { 

    if ($(window).scrollTop() + $(window).height() >= $(window).height()) { 
     $('div.shadow-bottom').show(); 
    } 

    $(window).scroll(function() { 

     if ($(window).scrollTop() >= 15) { 
      $('div.shadow-top').show(); 
     } else { 
      $('div.shadow-top').hide(); 
     } 
     if ($(window).scrollTop() + $(window).height() >= $(window).height() - 15) { 
      $('div.shadow-bottom').show(); 
     } else { 
      $('div.shadow-bottom').hide(); 
     } 

    }); 

}); 

頂部工作正常,但是當你到頁面的底部,但隨後再次顯示,如果你是從底部15個像素的底部應該藏身。

實施例:http://dev.driz.co.uk/shadow/

+0

如果您可以發佈html和css,這將是非常有用的。 :) – bhb

+0

新增原始帖子的例子。 – Cameron

回答

5

$(窗口).height(); //返回瀏覽器視口的高度

$(document).height(); //返回HTML文檔

的高度

你的代碼更改爲:

$(document).ready(function() { 

if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { 
    $('div.shadow-bottom').show(); 
} 

$(window).scroll(function() { 

    if ($(window).scrollTop() >= 15) { 
     $('div.shadow-top').show(); 
    } else { 
     $('div.shadow-top').hide(); 
    } 
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { 
     $('div.shadow-bottom').show(); 
    } else { 
     $('div.shadow-bottom').hide(); 
    } 

}); 

});​ 
+0

差不多。但是當我到達底部時,陰影就會顯示出來,而不是在底部顯示時顯示,然後在達到底部時隱藏! BUT只能在需要時顯示,例如該頁面足夠大。我已經發布了上面的答案,但我會給你接受。 – Cameron

1

正確的工作的例子是:

$(document).ready(function() { 

      if ($(window).height() < $(document).height()) { 
       $('div.shadow-bottom').show(); 
      } 

      $(window).scroll(function() { 

       if ($(window).scrollTop() >= 15) { 
        $('div.shadow-top').show(); 
       } else { 
        $('div.shadow-top').hide(); 
       } 
       if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { 
        $('div.shadow-bottom').hide(); 
       } else { 
        $('div.shadow-bottom').show(); 
       } 

      }); 

      }); 

這是基於BHB的回答以上。