Làm cách nào để nhận div vị trí cố định để cuộn theo chiều ngang với nội dung? Sử dụng jQuery

Question

Tôi có một div.scroll_fixed với CSS sau đây

.scroll_fixed { 
    position:absolute 
    top:210px 

} 
.scroll_fixed.fixed { 
    position:fixed; 
    top:0; 
} 

Tôi đang sử dụng mã jQuery sau đây để thiết lập các lớp .fixed khi div đạt top of the page.

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); 

$(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top) { 
     // if so, ad the fixed class 
     $('.scroll_fixed').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('.scroll_fixed').removeClass('fixed'); 
    } 
}); 

Điều này rất hữu ích cho việc chỉnh sửa cuộn dọc. Nhưng với một cửa sổ trình duyệt nhỏ, cuộn ngang gây ra xung đột với nội dung ở bên phải của div cố định này.

Tôi muốn div cuộn với nội dung theo chiều ngang.

Bất kỳ ai cũng có thể chỉ cho tôi đúng hướng. Vẫn nhận được đôi chân của tôi ướt với JS/JQuery.

Tôi về cơ bản muốn nó hoạt động giống như hộp thứ hai trong số example này.

Answer 1

Bản demo là giữ các yếu tố của position:fixed và thao tác left tài sản của nguyên tố này:

var leftInit = $(".scroll_fixed").offset().left; 
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); 


$(window).scroll(function(event) { 
    var x = 0 - $(this).scrollLeft(); 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top) { 
     // if so, ad the fixed class 
     $('.scroll_fixed').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('.scroll_fixed').removeClass('fixed'); 
    } 

    $(".scroll_fixed").offset({ 
     left: x + leftInit 
    }); 

}); 

Sử dụng leftInit mất một lề thể trái vào tài khoản. Hãy dùng thử tại đây: http://jsfiddle.net/F7Bme/

Answer 2

Có thể bạn đã di chuyển vào lúc này, nhưng đây là câu trả lời cho bất kỳ ai khác đang tìm kiếm giải pháp phần tử cố định có thể cuộn ngang. Plugin jquery này được tạo ra để giải quyết vấn đề chính xác này.

Bản trình diễn này sử dụng tóm tắt giỏ hàng vẫn sẽ cuộn theo chiều ngang khi cố định lên đầu trang; và, tôi cũng đã sử dụng nó một tiêu đề trên dữ liệu bảng:

Demo: http://jsfiddle.net/y3qV5/434/ (cập nhật)

Plugin và nguồn: https://github.com/bigspotteddog/ScrollToFixed

Cách sử dụng:

$(document).ready(function() { 
    $('#cart').scrollToFixed({ marginTop: 10 }); 
}); 

Answer 3

sử dụng tài sản css position:sticky để có được nó.

Đây là bài viết được giải thích và bản trình diễn trực tiếp.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

hạn chế duy nhất là khả năng tương thích với trình duyệt.