Đặt giới hạn giá trị CSS của hoạt ảnh cuộn cửa sổ

Question

Tôi có < div id = 'map'> bản đồ trang trình bày khi người dùng cuộn xuống. Tuy nhiên, dường như để cho bản đồ cuộn mãi mãi, không bao giờ cho phép người dùng thực sự đến cuối trang (có chân trang).

Điều tôi đang cố gắng thực hiện là nhận được < div> để dừng cuộn khi nó đến cuối một kích thước động khác (chiều cao là biến) < div>. Hai số < div> s này cạnh nhau và trong cùng một hàng.

Đây là đoạn mã Javascript Tôi đang sử dụng để làm cho di chuyển div đúng với cuộn của người dùng:

$(function() { 

    var $sidebar = $("#map"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } 
     else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 
}); 

Answer 1

Bạn không thể sử dụng animate() phương pháp với chức năng cuộn nó sẽ tạo ra mâu thuẫn bởi vì giá trị cuộn sẽ thay đổi luôn và jQuery không thể lặp lại cùng một hình động. Dừng sẽ không giải quyết vấn đề này, hoặc tôi không thể quản lý để làm điều đó.

Và i suggest to use variation trong câu hỏi if.

Here is not working animate sample with animate usage.

Here is same example working with css method.

$(window).scroll(function() { 
    var scrollVal = $(this).scrollTop(); 
    if (scrollVal > offset.top) { 
     $sidebar.css({ 
      'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px' 
         //added +'px' here to prevent old internet explorer bugs 
     }); 
    } else { 
     $sidebar.css({'margin-top':'0px'}); 
    } 
}); 

Lưu ý: nếu bạn muốn mở rộng của bạn nếu phát biểu với else if, không sử dụng else, nó sẽ tạo ra mâu thuẫn quá. Bealive tôi tôi thực sự expreienced với vấn đề này.

UPDATE:

Bạn có thể thay đổi approuch của bạn để tính toán các giới hạn quá. Tôi đoán bạn muốn sửa chữa nav và html của bạn là như thế này:

<div class="wrapper"> 
    <div class="header">header</div> 
    <span id="subnav">hold this</span> 
</div>​ 

và tính toán jQuery nên như thế này: Here is working jsFiddle.

$(document).ready(function() { 
    $(window).scroll(function() { 
     var headerH = $('.header').outerHeight(true); 
     //this will calculate header's full height, with borders, margins, paddings 
     console.log(headerH); 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal > headerH) { 
     //when scroll value reach to your selector 
      $('#subnav').css({'position':'fixed','top' :'0px'}); 
     } else { 
      $('#subnav').css({'position':'static','top':'0px'}); 
     } 
    }); 
});​