js Thực hiện một cuộn trơn tru

Question

Tôi nghiêm túc có câu hỏi về sự kiện cuộn. Tôi đã cố gắng giải quyết nó cả đêm nhưng tôi không thể.

Tôi đang cố gắn thanh điều hướng ở trên cùng. Hiệu ứng thanh sẽ xử lý khi $(window).scrollTop() chuyển điểm ngay trước khi điều hướng.

Vấn đề là, sẽ có hiệu ứng "nhấp nháy" (quá trình trì hoãn như trên) trên IE và Chrome nhưng không phải trên Firefox.

Trong khi nghiên cứu của tôi, tôi biết rằng Firefox có "cuộn trơn tru" theo mặc định.

Tuy nhiên, xin vui lòng kiểm tra ví dụ này trên Chrome hoặc IE

http://www.backslash.gr/demos/jquery-sticky-navigation/

Nó là như vậy trơn tru như trên Firefox, và mã là chỉ đơn giản ......

Điểm là, tôi đang làm chính xác điều tương tự như ví dụ này nhưng tại sao tôi có hiệu ứng 'chớp mắt'?

Bí quyết trên CSS ??

Có cách nào để tôi có thể tạo scrool mượt mà như những gì trên firefox bởi js không ??

Cảm ơn bạn rất nhiều vì sự giúp đỡ của bạn.

$(window).on('scroll', Sticky); 

function Sticky(){ 
    $(this).scrollTop() > anchor.offset().top 
    ? nav.css({ 'position': 'fixed', 
         'z-index': z_index, 
         top: y, 
         left: x, }) 
    : nav.css({ 'position': 'static', }); 
}; 

Answer 1

Nhìn vào mã ví dụ không đầy đủ đó là thực sự khó khăn để xác định những gì đang xảy ra, vì vậy vui lòng cập nhật câu hỏi của bạn với mã hoàn chỉnh, hoặc tốt hơn - tải lên một JSFiddle để phục vụ chúng ta là một ví dụ và chúng ta có thể trực tiếp cập nhật nó với những thay đổi cần thiết. Cho đến nay (dựa trên những gì tôi đã nói trước đó) có vẻ như bạn đang nhận được một hiệu ứng flickering do lỗi chính tả trong ví dụ mã của bạn:

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        top: y, 
        left: x, }) 
: nav.css({ 'position': 'static', }); 

nơi bạn không chấm dứt loạt các thuộc tính CSS và các giá trị cần được áp dụng (bạn sẽ kết thúc bằng dấu phẩy ,) và bạn không kèm theo một số thuộc tính CSS trong một dấu ngoặc đơn '. Mã của bạn nên:

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        'top': y, 
        'left': x }) 
: nav.css({ 'position': 'static' }); 

Đó là tất nhiên miễn là bạn đã thiết lập các biến z_index, y và x trước.

CHỈNH SỬA & TỪ BỎ: Tôi đã tạo JSFiddle mới bằng mã demo gốc. Bản giới thiệu mà bạn gọi là có bản quyền, vì vậy hãy nêu lòng biết ơn của bạn với tác giả gốc và không phải tôi, nếu điều đó giúp bạn. Mã tôi đã đăng JSFiddle có sẵn như là một tải về miễn phí, mặc dù. Vì vậy, tôi đoán nó là OK để tái sử dụng nó cho mục đích demo là tốt. Thay đổi mã đó để tuân thủ các yêu cầu của bạn và cập nhật nó lên phiên bản mới mỗi bước bạn cập nhật nó. Nó sẽ giúp bạn theo dõi bạn đang làm gì sai (nếu có). ;)

Answer 2

Tôi nghĩ bạn có thể nhầm lẫn hai điều ở đây.

1. xem mã hoạt động bạn đã liên kết. có một nhấp nháy trong đó nếu bạn cuộn trên chrome hoặc IE hoặc firefox bằng cách sử dụng chuột cuộn của bạn.
2. Nhấp nháy là vì bạn đang thay đổi đột ngột vị trí. Cố gắng thay đổi js để nó làm động thái vị trí thay vì đột ngột thay đổi giá trị của nó.

Như những người khác đã nói liên kết đến mã làm việc và mong đợi câu trả lời bằng cách hiển thị mẹo có thể không giúp ích cho tất cả chúng ta. Hãy thử thêm animate trên dòng thay đổi vị trí của js và xem nếu điều đó giúp.

Không có mẹo nào ở đây. Tất cả trong mã của nó để đọc nguồn và tận hưởng.