Cố định vị trí CSS. Div wrapper phải được cố định theo chiều dọc nhưng phải được thay đổi trong chiều ngang

Question

Tôi đã một div, một cái gì đó như thế này

#footer 
    { position:fixed; 
     left:40px; 
     top:0px; 
    } 

Vị trí được cố định khi tôi cuộn theo chiều dọc hoặc chiều ngang. Nhưng tôi muốn div được cố định khi người dùng cuộn thanh cuộn theo chiều dọc nhưng phải thay đổi khi người dùng cuộn thanh cuộn theo chiều ngang.

Tôi đã thấy một số diễn đàn và bài đăng nhưng chủ yếu là tôi tìm thấy tập lệnh jquery.I muốn biết liệu có cách nào để thực hiện điều đó trong CSS không?

Fixed position in only one direction Tôi đã đọc bài đăng này nhưng tôi không hiểu tập lệnh jquery. Xin vui lòng cho tôi biết cách để làm điều đó trong css hoặc cách tốt hơn để làm điều đó với jquery.Thanks

Answer 1

Dường như không thể làm được điều này "trông ổn" chỉ với CSS/HTML. Như đã đề cập từ Ruup hoặc Fixed position in only one direction, phân lớp trên JS cho nó, là một lựa chọn tốt.

May mắn thay, tôi tìm thấy một cách để làm cho nó hoạt động bằng cách nào đó (không phải là đẹp): http://jsfiddle.net/MKEbW/5/

HTML (bên trong cơ thể-tag):

<div id="simulated-html"> 
    <div id="footer"> 
     <span> 
      <!-- Footer text here --> 
     </span> 
    </div> 
    <div id="simulated-body"> 
     <!-- Your website here --> 
    </div> 
</div> 

CSS:

* { margin:0; padding:0; } 

html { 
    font: 12px/1.5em Georgia; 
} 
p { padding: 5px; } 

html, body { 
    height: 100%; 
    overflow: hidden; /* hide scrollbars, we create our own */ 
} 

#simulated-html { 
    background: orange; 
    overflow-x: scroll; /* force horizontal scrollbars (optional) */ 
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */ 
    position: relative; /* to align #footer on #simulated-html */ 
    height: 100%; 
} 

#simulated-body { 
    overflow-y: scroll; /* force vertical scrollbars (optional) */ 
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */ 
    height: 100%; 
    background: #eee; 

    /* use as a container */ 
    width: 450px; 
    margin: 0 auto; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; /* vertical align it to #simulated-html */ 
    width: 100%; 
    background: red; 
    z-index: 99; /* always show footer */ 
    color: white; 
} 
#footer span { 
    width: 450px; 
    margin: 0 auto; 
    background: green; 
    display: block; 
} 

Dường như hoạt động trong trình duyệt IE7 + và trình duyệt hiện đại, được kiểm tra qua browserlab.adobe.com.

Thử nghiệm với thanh cuộn, nhỏ hơn và khung nhìn rộng hơn trong Chrome 18.

Tôi đề nghị một dự phòng cho các trình duyệt không có khả năng và/hoặc một workaround JS.

Answer 2

trục ngang sẽ khác nhau như thế nào? cách mã này hiện đang ở lại 40px từ bên trái vào mọi lúc. để làm cho vị trí thay đổi lề trái tương ứng với kích thước của cửa sổ, bạn phải sử dụng tỷ lệ phần trăm và lề âm. ví dụ: để căn giữa div cố định:

 #centered { 
      height: 350px; 
      top: 0; 
      position: fixed; 
      width: 1024px; 
      left: 50%; 
      margin-left: -512px; 
      z-index: 9999; 
      } 

lưu ý rằng lề âm của bạn phải là HALF chiều rộng của div. nếu bạn muốn nó 40px bên trái của trung tâm sau đó bạn sẽ thêm một 40px để lề trái.

Answer 3

Bài đăng được liên kết chính xác là những gì bạn cần. Bạn có thể sao chép tập lệnh chính xác.

$(window).scroll(function(){ 
$('#footer').css('left','-'+$(window).scrollLeft()); 
}); 

Các div css là như thế này (có thể là không chân trang khi nó có top 0px: P nhưng ok)

#footer 
{ position:fixed; 
    left:40px; 
    top:0px; 
} 

Khi bạn di chuyển các tập lệnh jquery chỉ điều chỉnh bên trái (x) phối hợp với cùng giá trị với scrollLeft của cửa sổ.

Answer 4

Có một sửa chữa nhỏ trên mã trước đó.

Các thay đổi mã javascript để di chuyển div cố định theo chiều ngang

$(window).scroll(function(){ 
    $('#footer').css('left',-$(window).scrollLeft()); 
});