jQuery .offset từ vị trí dưới cùng không hoạt động trong chức năng cuộn?

Question

Tôi đang gặp sự cố khi đặt 2 vị trí trên một chức năng cuộn bằng cách sử dụng bù trừ.

tôi đã tạo ra một fiddle do đó bạn có thể nhìn thấy ... http://jsfiddle.net/motocomdigital/SGCHt/12/

Khi bạn mở fiddle này, giảm viewport xem trước fiddle xuống đến kích thước tương tự của ảnh chụp màn hình dưới đây.

vấn đề của tôi

Bạn có thể thấy tôi đang sử dụng báo cáo có điều kiện để kiểm soát vị trí của các tab màu xanh, phụ thuộc vào thời điểm họ đang ở cuộn.

Các cột màu vàng biểu thị các vùng chứa tab và tôi đang sử dụng câu lệnh if else để kiểm soát vị trí dưới cùng để các tab màu xanh không bao giờ nằm ​​ngoài vùng chứa màu vàng.

Nhưng tôi không thể làm việc này. Mức bù đắp vị trí đáy của tôi không hoạt động.

var $tab = $('.tab-button'); 

$(window).bind("resize.browsersize", function() { 

    var windowHalf = $(window).height()/2, 
     content = $("#content"), 
     pos  = content.offset(); 


    $(window).scroll(function(){ 

     if ($(window).scrollTop() >= pos.top + windowHalf){ 

      $tab.removeAttr('style').css({ position:'fixed', top:'50%'}); 

     } else if ($(window).scrollTop() >= pos.bottom + windowHalf){ 

      $tab.removeAttr('style').css({ position:'absolute', bottom:'0px'}); 

     } else { 

      $tab.removeAttr('style').css({ top: $(window).height() + 'px' }); 

     } 

    }); 

}).trigger("resize.browsersize"); 

bất cứ ai có thể vui lòng giúp tôi hiểu nơi tôi sẽ sai.

Cảm ơn Josh

Answer 1

Vì vậy, nó xuất hiện bạn phải tính toán đáy bù đắp của một nguyên tố bằng tay. Tôi đã cố gắng tìm một cái gì đó để làm cho cuộc sống của bạn dễ dàng hơn trong tài liệu jQuery nhưng lại không có gì cả. Giả sử là bù đắp chỉ hỗ trợ trên/trái

http://api.jquery.com/offset/

Nếu chúng ta thấy chiều cao của wrapper, trừ đi chiều cao của các tab, chúng ta có thể tìm ra chính xác nơi để hạn chế di chuyển tab.

Ngoài ra tôi đã bao gồm định nghĩa CSS css của tab trên cùng. Không định nghĩa nó onload, có một sự thay đổi chiều cao tài liệu lạ trước cuộn đầu tiên.

http://jsfiddle.net/SGCHt/16/